HTML DOM children属性和childNodes属性的区别

children属性

children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。

根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。

childNodes属性

childNodes 属性返回包含被选节点的子节点的 NodeList。

同样可以使用 length 属性来确定子节点的数量，进行遍历等操作。

（空格、换行视为文本节点）

两者的区别

childNodes 属性返回所有的节点，包括文本节点、注释节点；

children 属性只返回元素节点；

（对于children属性，IE6 到 IE8 支持但返回元素节点和注释节点，IE9 以上版本只返回元素节点。）

 

一道例题：

<html>
<body>
 <div id="ele" class="div">
 <span id="s1" class="sp" lang="zh-cn">
</span>
 </div>
</body>
<script type="text/javascript">  
 function exct() {
    var oEle = document.getElementById("ele");
    var child = oEle.children;
    console.log("ele.children的执行结果是:");
    for(i = 0; i < child.length; i++){
       console.log(child[i].tagName);
    }  
    child = oEle.childNodes;
    console.log("ele.childNodes的执行结果是:");
    for(i = 0; i < child.length; i++){
       console.log(child[i].tagName);
    }
    child2 = oEle.childNodes;
    console.log("ele.childNodes的执行结果2是:");
    for(i = 0; i < child2.length; i++){
       console.log(child2[i].nodeName);
    }
 }  
 exct(); 
</script>
</html>

所以运行结果即为

 文本节点没有标签名tagName，所以为undefined；文本节点的nodeName为#text。

 

posted @ 2020-08-04 10:31  Monicaaa321  阅读(425)  评论(0)    收藏  举报