如何深入理解Javascript中的ParentNode和ChildNode接口工作原理？

本文共计942个文字，预计阅读时间需要4分钟。

ParentNode接口，ChildNode接口以及节点对象去除了继承Node接口之外，还包含其他接口。ParentNode接口表示当前节点是一个父节点，提供处理子节点的方法。ChildNode接口表示当前节点是一个子节点。

ParentNode 接口，ChildNode 接口

节点对象除了继承 Node 接口以外，还拥有其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。

ParentNode 接口

如果当前节点是父节点，就会混入了（mixin）ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥有ParentNode接口。

ParentNode.children
children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。

下面是遍历某个节点的所有元素子节点的示例。

for (var i = 0; i < el.children.length; i++) { // ... }

注意，children属性只包括元素子节点，不包括其他类型的子节点（比如文本子节点）。如果没有元素类型的子节点，返回值HTMLCollection实例的length属性为0。

另外，HTMLCollection是动态集合，会实时反映 DOM 的任何变化。