DOM 元素的遍历

㼛思雨

于 2020-10-16 14:51:35 发布

阅读量325

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45147894/article/details/109110227

版权

浏览器兼容性 DOM遍历 ElementTraversal API 子元素同辈元素

关键词由CSDN通过智能技术生成

Javascript 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

对于元素间的空格，各浏览器会做出不同的反应，就导致了在使用childNodes和firstChild等属性时的行为不一致，由此，Element Traversal API 为DOM元素添加了以下５个属性。

childElementCount:返回子元素（不包括文本节点和注释）的个数

firstElementChild:指向第一个子元素，firstChild的元素版。

lastElementChild：指向最后一个元素，lastChild的元素版。

previousElementSibling:指向前一个同辈元素，previousSibling的元素版。

nextElementSibling:指向后一个同辈元素；nextSibling的元素版。

例如：

元素的遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-widthh, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
<p>你瞅啥</p>    
<div id="div1">
<a href="javascript:;" class="lits">1111</a>
<a href="javascript:;" class="lits">2222</a>
<a href="javascript:;" class="lits">3333</a>
<a href="javascript:;" class="lits">4444</a>
</div>
<div class="demo">这是段落</div>
    <script>
      var oDivs=document.querySelector("#div1");
      console.log(oDivs.childElementCount);
      console.log(oDivs.firstElementCount);
      console.log(oDivs.lastElementCount);
      console.log(oDivs.previousElementSibling);
      console.log(oDivs.nextElementSibling);
    </script>
</body>
</html>

㼛思雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 元素的遍历

对于元素间的空格，各浏览器会做出不同的反应，就导致了在使用childNodes和firstChild等属性时的行为不一致，由此，Element Traversal API 为DOM元素添加了以下５个属性。childElementCount:返回子元素（不包括文本节点和注释）的个数firstElementChild:指向第一个子元素，firstChild的元素版。lastElementChild：指向最后一个元素，lastChild的元素版。previousElementSibling:指向
复制链接

扫一扫

专栏目录