childNodes 和 children 有什么区别？

面试官：childNodes 和 children 有什么区别？ - 掘金

1.Node 和 Element

想要学习这两个属性，我们必须要先知道 Node 和 Element 的区别。

在 JS 操作 DOM 的时候，我们有时候会操作 Node 节点，有时候也会才做 Element，这两者的区别有些人傻傻分不清，其实它们两个的区别很简单。

• Node：

在 DOM 树中，所有的节点都是 Node，包括 Element，也就是说 Node 包含了 HTML 元素标签、text、以及注释等等内容，它是所有 DOM 的基类。

• Element：

在 DOM 树中，Element 是所有 HTML 元素的基类，也就是说，Element 只包含 HTML 元素标签。

综上两点可以得出：Node 和 Element 两者是包含关系，Node 包含 Element。从而衍生出了两个集合：NodeList 和 HTMLCollection。NodeList 是 Node 的集合，HTMLCollection 是 Element 的集合。

2.childNodes理解

官网说的也比较通俗易懂，childNodes 属性返回的是 DOM 节点的子集合，它属于 NodeList 集合

总结：

childNodes会返回所有节点，包括HTML、Text、注释等等内容

3.children理解

通过官网的解释可以得出：childre属于HTMLCollection集合，它返回的是节点的子elements，通俗的说，children返回的是HTML元素标签。

总结：

children只返回元素节点。

4.代码演示

4.1 childNodes

我们会发现输出的节点长度为11，其中多了很多的文本节点，和我们编写的代码产生了冲突，问题就在于childNodes会返回所有节点，包括注释、标签、换行文本等等。

这个时候输出结果就和我们的理想结果一样了，输出中包含了节点和注释。

通过上面的代码实例可以看出，如果我们使用childNodes来进行获取子节点，那么换行也会被统计进去，这不是我们想要的结果。为了解决这个问题，我们可以通过nodeType这个属性来判断该节点是什么类型，它的取值有3个：

• 1：元素节点
• 2：属性节点
• 3：文本节点

4.2 children

两个属性的区别到这里应该就很清楚了，它们有着各自的有点和缺点，需要根据不同的场景下使用不同的属性，总结如下两点：

• childNodes属于NodeList集合，它会返回所有的子节点，包括文本、标签、注释等等。

• children数据HTMLCollection集合，它会返回所有HTML元素节点。

• childNodes包含children。