childNodes、children、firstChild和firstElementChild

发表于 | 分类于

这是一段html代码：

1
2
3
4
5
6
7
8
9
10
<div id="div1">
	hello world
	<div>
		<p>第一个p</p>
	</div>

	<div>
		<p>第二个p</p>
	</div>
</div>

  • childNodes：返回节点的子节点集合，以 NodeList 对象
1
console.log(div1.childNodes.length);  //5

因为childNodes会把文本算入节点，即使文本为空

  • children：返回节点的子节点，只返回元素节点
1
console.log(div1.children.length);  //2
  • firstChild：返回指定节点的首个子节点，以 Node 对象
1
2
3
4
console.log(div1.firstChild);  
//
//		hello world
//

返回的是第一个文本节点

  • firstElementChild：返回指定节点的首个子节点，只返回元素节点
1
2
3
4
console.log(div1.firstElementChild);
//  <div>
//	 <p>第一个p</p>
//  </div>