计算机系统应用教程网站

网站首页 > 技术文章 正文

javaScript DOM获取元素和节点 dom操作中获取节点的方法有哪几种

btikc 2024-10-25 10:58:38 技术文章 6 ℃ 0 评论

获取元素

根据ID获取标签元素

var div1=document.getElementById("div1");

根据标签名获取标签列表

var divs=document.getElementsByTagName("div");

根据标签名获取元素子标签列表

var divs=diva.getElementsByTagName("div"); (如果使用元素调用,就是指当前这个元素diva的子元素的标签名是div的)

根据className获取标签列表

var div0 =document.getElementsByClassName("div0");

根据className获取元素子标签列表

var div0=diva.getElementsByClassName("div0");

根据name获取节点列表(仅可使用document)

var sexs=document.getElementsByName("sex");

兼容性:上述方法仅用于IE8以后

根据选择器获取到第一个找到的元素

var div=document.querySelector("div");
//获取第一个div标签
var div1=document.querySelector("#div1");
//获取ID为div1的标签
var div0=document.querySelector(".div0");
//获取class为div0的第一个标签
var div0=document.querySelector("#diva>.div0");
//获取id为diva的标签第一层子元素中class为div0的第一个元素
var ps=document.querySelector("[name=password]");
//获取具有name属性且属性值为password的第一个子元素

根据选择器获取到所有的元素(形成列表)

var div=document.querySelectorAll("div");

获取节点

diva.childNodes//子节点

diva.children//子元素

diva.parentNode//父节点

diva.parentElement//父元素

diva.firstChild//第一个子节点

diva.firstElementChild//第一个子元素

diva.lastChild//最后一个子节点

diva.lastElementChild//最后一个子元素

diva.nextSibling//下一个兄弟节点

diva.nextElementSibling//下一个兄弟元素

diva.previousSibling//上一个兄弟节点

diva.previousElementSibling//上一个兄弟元素

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表