JS DOM childNodes 和 children - Kaiqisan

JS DOM childNodes 和 children

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 今天开一个新坑，开始讲DOM的知识点，也顺便复习复习以前所学的知识，毕竟，在我刚接触js的时候，学得最早的就是DOM，忘得最多的也是DOM。

ele.childNodes: 获取当前节点的所有的孩子节点的信息(如果不了解树结构的可以这么理解----获取当前标签层次的下面一层标签和文本的所有信息。)

就举这样的例子吧

<ul class="list">
	<li>
		<div>app</div>
	</li>
	<li>Sam</li>
	<li>Lily</li>
</ul>

    let a = document.getElementsByClassName('list')[0]
    console.log(a.childNodes)

获取输出之后，里面拥有7个成员,类型为NodeList,可以当数组那样使用，但不可遍历

[text, li, text, li, text, li, text]

里面的li很好理解，就是获取了ul标签里的li标签的DOM信息，但是这个text该怎么理解呢？

<ul class="list">
    文本内容
	<li>
		<div>app</div>
	</li>
    文本内容
	<li>Sam</li>
    文本内容
	<li>Lily</li>
    文本内容
</ul>

上面的四个text分别代表了上面的三个li标签空隙处的文本信息( 包括换行符)，有n个标签就会有n+1个文本空隙，也会有n+1个文本节点。如果想验证的话，就往这些空隙里打字，然后获取输出，再打开相应的节点，查看data属性就自然知道了。

如图，光标所划过的位置就是算一个文本节点的内容。

问: 为什么不获取第一个li里面的div?
答: 这是ul标签的子节点的子节点，不在获取的范畴内。但可以通过以下方法获取

let a = document.getElementsByClassName('list')[0]
console.log(a.childNodes[1].childNodes)

这个childNodes相当于数据结构中树的getChild方法，获取孩子的所有资料。

ele.children: 与上面的childNodes不同的是它获取的是父节点下所有除去text类型和comment类型（注释节点）的子节点的信息

<ul class="list">
	<li>
		<div>app</div>
	</li>
	<li>Sam</li>
	<li>Lily</li>
</ul>

    let a = document.getElementsByClassName('list')[0]
    console.log(a.children)

获取输出之后，里面拥有3个成员,类型为HTMLCollection,可以当数组那样使用，但不可遍历。

[li, li, li]

确实，它忽略了标签与标签间隙之间的文本，只获取标签的相关信息，这在某些程度也更加灵活便捷。

总结

这个方法在使用原生js的时候极其好使，非常灵活，建议多用。学过树结构的小伙伴可以灵活使用，从而实现自动遍历DOM树结构。