DOM 元素的 children 与 childNodes 属性

JavaScript学习 本文总阅读量次

children 与 childNodes 的区别

childNodes 属性返回所有的节点，包括文本节点、注释节点。
children 属性只返回元素节点。

HTML DOM children 属性(子元素)

  • children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象（类似数组，有length属性，可使用index访问对应元素）。
  • 根据子元素在元素中出现的先后顺序进行排序，可以使用序列号(index，起始值为0)访问每个子元素。
  • 可以使用 HTMLCollection对象 的 length属性获取子元素的数量

HTML DOM childNodes 属性（所有节点）

  • childNodes 属性返回包含被选节点的子节点的 NodeList。
  • 空格和换行都会被看做一个文本节点。
  • 例子

相关题目

题目

分析下面代码，对于该段代码分析说法正确的是（ ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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);
    }
 }  
 exct (); 
</script>
</html>

答案

其运行结果是：

1
2
3
4
5
6
div1.children的执行结果是:
SPAN
div1.childNodes的执行结果是:
undefined
SPAN
undefined

对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。

解释

div元素下虽然只有一个span元素，但有3个子节点。
因为childNodes获取子节点没有类型限制，span是一个元素节点，还有两个文本节点：空格和换行都被看做一个文本节点。
所以，3个子节点 = 两个文本节点 + 一个元素节点。
tagName用来获取元素的标签名，文本节点没有标签名，所以也就为undefined了。

参考链接

JavaScript学习