节点：childNodes 属性

childNodes 是 Node 接口的只读属性，它返回一个包含给定元素所有子 节点 的实时 NodeList，其中第一个子节点的索引为 0。子节点包括元素、文本和注释。

注意： NodeList 是实时的，这意味着它的内容在每次添加或删除新子节点时都会发生变化。

浏览器会将文本节点插入文档以表示源标记中的空格。因此，例如使用 Node.childNodes[0] 获取的节点可能引用一个空格文本节点，而不是作者想要获取的实际元素。

有关更多信息，请参阅 DOM 中的空格。

集合中的节点是对象，而不是字符串。要从节点对象获取数据，请使用它们的属性。例如，要获取第一个 childNode 的名称，可以使用 elementNodeReference.childNodes[0].nodeName。

document 对象本身有两个子节点：Doctype 声明和根元素，通常称为 documentElement。在 HTML 文档中，后者是 <html> 元素。

重要的是要注意，childNodes 包括所有子节点，包括非元素节点，如文本和注释。要获取仅包含元素的集合，请改用 Element.children。

值

包含节点子节点的实时 NodeList。

注意： 对 childNodes 的多次调用将返回相同的 NodeList。

示例

简单用法

js
// Note that parg is an object reference to a <p> element

// First check that the element has child nodes
if (parg.hasChildNodes()) {
  let children = parg.childNodes;

  for (const node of children) {
    // Do something with each child as children[i]
    // NOTE: List is live! Adding or removing children will change the list's `length`
  }
}

从节点中删除所有子节点

js
// This is one way to remove all children from a node
// box is an object reference to an element
while (box.firstChild) {
  // The list is LIVE so it will re-index each call
  box.removeChild(box.firstChild);
}

规范

规范
DOM 标准
# ref-for-dom-node-childnodes①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅