JS 中怎么用 children 和 childNodes 获取子节点集合-js教程-PHP中文网

children仅返回元素子节点，是实时htmlcollection；childnodes返回所有子节点（含文本、注释等），是nodelist。

js 中怎么用 children 和 childnodes 获取子节点集合

在 JavaScript 中，children 和 childNodes 都用于获取元素的子节点，但它们返回的内容和类型完全不同，选错容易导致遍历出错或属性访问失败。

children：只返回元素子节点（Element 类型）

children 是一个只读的 HTMLCollection，它**仅包含当前元素的子元素节点（即标签节点）**，忽略文本、注释、空格等非元素节点。

返回值是“实时集合”，DOM 变化会自动反映在该集合中
每个项都是 Element 对象，可以直接调用 .style、.className 等元素特有属性
支持按索引访问（如 el.children[0]），也支持 el.children.length

示例：

<div id="box">
  <p>段落</p>
  <span>文字</span>
  <!-- 注释 -->
  普通文本
</div>

执行：

const box = document.getElementById('box');
console.log(box.children); // HTMLCollection [p, span]（只有两个元素）

childNodes：返回所有类型的子节点

childNodes 返回的是一个 NodeList，它包含当前元素下的**所有子节点**，包括：

用于自动切换项目中适合的node 版本

根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。

下载

元素节点（nodeType === 1）
文本节点（nodeType === 3，含空格、换行、实际文字）
注释节点（nodeType === 8）

注意：HTML 中常见的换行和缩进，在 DOM 解析后都会变成文本节点，所以 childNodes 往往比你预期的“多很多”。

示例（同上 HTML）：

console.log(box.childNodes);
// NodeList(5) [
//   #text（换行+空格）,
//   <p>段落</p>,
//   #text（换行+空格）,
//   <span>文字</span>,
//   #text（换行+注释+换行+“普通文本”+换行）
// ]

若只想操作元素节点，需手动过滤：

const elemNodes = Array.from(box.childNodes).filter(node => node.nodeType === 1);
// 或用 for 循环 + if(node.nodeType === 1)

常见误用与建议

想遍历子标签（比如统一加 class），用 children 更安全简洁
需要处理文本内容或注释（如提取纯文本、清理空白节点），必须用 childNodes
children 不包含 <slot></slot> 内容（Shadow DOM 场景下另有 assignedElements()）
不要对 childNodes 直接用 .forEach（老版本 IE 不支持），先转成数组：Array.from(node.childNodes).forEach(...)

快速区分口诀

children → child Elements only（只孩子，不养“空气”和“注释”）
childNodes → all child Nodes（连换行、空格、注释都算数）