children 与 childNodes 区别
DOM 中 children 和 childNodes 属性的区别与使用场景
问题
children 和 childNodes 都能获取子节点，它们有什么区别？
解答
基本区别
// HTML 结构
// <div id="parent">
// 文本内容
// <span>子元素1</span>
// <!-- 注释 -->
// <p>子元素2</p>
// </div>
const parent = document.getElementById('parent');
// childNodes: 返回所有子节点（包括文本、注释、元素）
console.log(parent.childNodes);
// NodeList(7) [text, span, text, comment, text, p, text]
// children: 只返回元素节点
console.log(parent.children);
// HTMLCollection(2) [span, p]完整示例
<!DOCTYPE html>
<html>
<body>
<div id="parent">
文本内容
<span>子元素1</span>
<!-- 这是注释 -->
<p>子元素2</p>
</div>
<script>
const parent = document.getElementById('parent');
// childNodes 包含所有节点类型
console.log('childNodes 数量:', parent.childNodes.length); // 7
parent.childNodes.forEach(node => {
console.log(`类型: ${node.nodeType}, 名称: ${node.nodeName}`);
});
// 类型: 3, 名称: #text (文本节点)
// 类型: 1, 名称: SPAN (元素节点)
// 类型: 3, 名称: #text
// 类型: 8, 名称: #comment (注释节点)
// 类型: 3, 名称: #text
// 类型: 1, 名称: P
// 类型: 3, 名称: #text
// children 只包含元素节点
console.log('children 数量:', parent.children.length); // 2
Array.from(parent.children).forEach(el => {
console.log(`标签: ${el.tagName}`);
});
// 标签: SPAN
// 标签: P
</script>
</body>
</html>返回类型对比
const parent = document.getElementById('parent');
// childNodes 返回 NodeList
console.log(parent.childNodes instanceof NodeList); // true
// NodeList 有 forEach 方法
// children 返回 HTMLCollection
console.log(parent.children instanceof HTMLCollection); // true
// HTMLCollection 没有 forEach，需要转换
Array.from(parent.children).forEach(el => {
// 处理元素
});节点类型常量
Node.ELEMENT_NODE // 1 - 元素节点
Node.TEXT_NODE // 3 - 文本节点
Node.COMMENT_NODE // 8 - 注释节点
// 用 childNodes 筛选元素节点
const elements = Array.from(parent.childNodes).filter(
node => node.nodeType === Node.ELEMENT_NODE
);
// 等价于 parent.children关键点
childNodes返回 NodeList，包含所有子节点（元素、文本、注释）children返回 HTMLCollection，只包含元素节点- HTML 中的换行和空格会产生文本节点，所以
childNodes.length通常比预期大 NodeList有forEach方法，HTMLCollection没有- 只需要操作元素时用
children，需要处理所有节点时用childNodes
目录