childnodes返回所有子节点（含文本、注释等），children仅返回元素节点；前者包含空白文本节点，后者自动过滤非元素内容，更简洁安全。

childNodes 和 children 都是用来获取元素子节点的属性，但它们返回的内容完全不同：childNodes 包含所有类型的子节点（元素、文本、注释等），而 children 只返回元素节点（即 HTML 标签），自动过滤掉文本节点和注释节点。

childNodes 会包含空白文本节点

HTML 中换行、缩进、空格在 DOM 解析时会被当作文本节点（nodeType === 3）。比如：

  

Hello

这个 div 的 childNodes 实际包含 3 个节点：一个换行+空格组成的文本节点、一个

元素节点、再一个换行文本节点。用 div.childNodes.length 得到的是 3，不是 1。

判断是否为元素节点可检查 node.nodeType === 1 或用 node instanceof Element。

Baidu Search Node

使用 Node.js 脚本调用百度搜索 API，按关键字和数量获取搜索结果的排名、标题、摘要和链接。

下载

children 只返回元素子节点

children 是只读的 HTMLCollection，里面全是 Element 类型节点，完全忽略文本、注释等非元素内容。上面例子中 div.children.length 就是 1，且 div.children[0] 就是那个

元素。

它不包含空格、换行、注释，也不响应动态插入的文本节点 —— 这正是它“干净”的原因。

实际使用建议

• 想遍历所有子内容（包括空格、换行、注释）—— 用 childNodes，并手动过滤：node.nodeType === 1 筛出元素，=== 3 筛出文本
• 只想操作子标签（最常见场景）—— 直接用 children，简洁安全，兼容性好（IE6+）
• 需要现代数组方法（如 map、filter）时，可转成数组：Array.from(element.children) 或 [...element.children]
• 注意 children 不是 NodeList，没有 forEach 方法（原生 HTMLCollection），需转换后再调用

一个小验证技巧

快速对比两者差异，可以在控制台运行：

const el = document.querySelector('div');
console.log('childNodes:', el.childNodes);
console.log('children:', el.children);
console.log('纯元素数量:', el.children.length);
console.log('所有节点数量:', el.childNodes.length);

观察输出，就能直观看到文本节点如何“悄悄混入”childNodes。