DOM 元素的 children 与 childNodes 属性

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了。


参考链接