JS获取子节点列表的几种方法

本文深入解析了JavaScript中获取HTML元素子节点列表的常用方法，重点区分了`childNodes`和`children`属性的本质差异。`childNodes`返回包含所有类型节点的NodeList，而`children`仅返回元素节点的HTMLCollection。文章详细阐述了如何高效遍历和筛选子节点，包括使用`for...of`、`forEach`循环，结合`nodeType`进行筛选，以及利用`Array.from()`转换为数组后进行过滤。此外，还介绍了`querySelector`和`querySelectorAll`等更灵活的选择器方法。文章强调了实时集合的动态更新特性，并提供了避免遍历中删除元素导致异常的实践建议。最后，针对大量DOM操作的性能优化，提出了转换为静态数组或使用DocumentFragment的方案。掌握这些技巧，能帮助开发者更高效、安全地处理DOM子节点，提升Web应用的性能和用户体验。

childNodes返回包含所有类型子节点的NodeList（包括文本、注释节点），children仅返回元素节点的HTMLCollection；2. 遍历时可用for...of或forEach，结合nodeType筛选或使用Array.from()转换后filter；3. querySelector/querySelectorAll提供更灵活的选择器筛选；4. 注意实时集合的动态更新特性，避免遍历中删除元素导致的异常；5. 大量操作时应转换为静态数组或使用DocumentFragment提升性能。正确选择API并规避实时性陷阱可高效安全地处理DOM子节点。

要获取一个HTML元素的子节点列表，JavaScript提供了几种不同的属性和方法，最直接常用的包括childNodes和children。前者会返回所有类型的子节点（包括文本节点和注释节点），而后者则更专注于只返回元素节点，这在使用时需要根据具体需求来选择。

获取元素的子节点列表，我们通常会用到DOM元素的几个核心属性。比如，如果你想获取所有类型的子节点，包括那些肉眼不可见的换行符、空格组成的文本节点，element.childNodes是个不错的选择。它返回一个实时的NodeList集合。但如果你的目标只是那些实际的HTML标签，也就是元素节点，那么element.children会更符合你的预期，它返回的是一个HTMLCollection。

此外，还有一些便捷的属性可以直接获取特定类型的子节点：

• element.firstElementChild：获取第一个子元素节点。
• element.lastElementChild：获取最后一个子元素节点。
• element.nextElementSibling：获取紧邻的下一个兄弟元素节点。
• element.previousElementSibling：获取紧邻的上一个兄弟元素节点。

这些都非常实用，特别是当你需要快速定位某个特定位置的子元素时。

获取子节点时，childNodes和children有何本质区别？

这个问题，其实是前端开发里一个经典的小“坑”点。childNodes返回的是一个NodeList，它包含了元素的所有子节点，注意，是“所有节点”，这意味着不仅仅是HTML标签，还包括了文本节点（比如标签之间的空格、换行符）和注释节点。这在处理一些动态生成内容或者需要精确控制DOM结构时，可能会让你感到困惑，因为你可能不希望那些空白字符也被算作一个“子节点”。

举个例子：

<div id="parent">
    <!-- 这是一个注释 -->
    <span>子元素1</span>
    文本节点
    <p>子元素2</p>
</div>

如果你对#parent使用childNodes，你可能会得到一个包含7个或更多节点的列表：NodeList [text, comment, text, span, text, p, text]。这里的text节点就是那些换行和空格。

而children则“聪明”得多，它返回的是一个HTMLCollection，这个集合里只包含元素节点。对于上面的例子，children只会返回[span, p]。这在绝大多数情况下，是开发者更希望得到的。它简化了遍历和操作的逻辑，因为你不需要额外去判断节点类型。所以，如果你只关心HTML标签，直接用children会省心很多。

但也要知道，NodeList和HTMLCollection都是“活的”集合，这意味着当DOM结构发生变化时，它们会自动更新。这不是静态快照，这点有时挺方便，有时也需要注意，因为它可能导致你在遍历时遇到意想不到的问题，比如在遍历过程中删除元素。

如何高效遍历并筛选获取到的子节点？

拿到子节点列表后，下一步通常就是遍历它们，然后可能还需要根据特定条件进行筛选。对于NodeList，你可以直接使用for...of循环来遍历，或者，如果它支持（现代浏览器基本都支持），也可以用forEach方法。

const parent = document.getElementById('parent');

// 遍历 childNodes
console.log("遍历 childNodes:");
for (const node of parent.childNodes) {
    console.log(node.nodeType, node.nodeName);
    // nodeType 1: 元素节点, 3: 文本节点, 8: 注释节点
    if (node.nodeType === 1) { // 筛选出元素节点
        console.log('这是一个元素节点:', node.tagName);
    }
}

// 遍历 children
console.log("\n遍历 children:");
for (const element of parent.children) {
    console.log('这是一个子元素:', element.tagName);
}

// 结合 Array.from 和 filter 进行更灵活的筛选
// 比如筛选出所有的 div 元素
const allDivChildren = Array.from(parent.children).filter(child => child.tagName === 'DIV');
console.log("\n筛选出的 div 元素:", allDivChildren);

// 或者，更直接地使用querySelector/querySelectorAll
// 如果你知道你要找的是特定类型的子元素，这可能是最直接高效的方式
const firstSpan = parent.querySelector('span'); // 获取第一个 span 子元素
const allPs = parent.querySelectorAll('p'); // 获取所有 p 子元素（返回 NodeList）
console.log("第一个 span:", firstSpan);
console.log("所有 p 元素:", allPs);

querySelector和querySelectorAll在这里显得特别有用，它们提供了更强大的选择器能力，可以直接定位到符合条件的子孙元素，而不仅仅是直接子节点。虽然它们返回的是静态的NodeList（对于querySelectorAll），但在很多场景下，这种“一劳永逸”的筛选方式比手动遍历再判断要简洁得多。

获取子节点时可能遇到的常见挑战与最佳实践？

在使用JavaScript获取DOM子节点时，确实有些细节需要留意，否则可能会遇到一些意想不到的问题。

一个常见的挑战是文本节点的存在。就像前面提到的，childNodes会把HTML标签之间的空格、换行符都当作独立的文本节点。这在调试时可能会让人困惑，因为你可能会发现childNodes.length比你预期的要大，而且其中夹杂着很多#text节点。如果你不打算处理这些空白文本节点，那么坚持使用children通常是更稳妥的选择。

另一个点是“实时”集合的特性。NodeList和HTMLCollection都是实时（live）的。这意味着当你通过它们获取到元素集合后，如果DOM树发生变化（比如添加、删除或移动了元素），这些集合会自动更新。这既是优点，也可能是陷阱。比如，你在一个for循环中从后往前删除元素通常是安全的，但如果从前往后删除，集合的长度和索引会实时变化，可能导致跳过某些元素或者访问到不存在的索引。如果需要对集合进行修改操作，有时将其转换为静态数组会更安全，例如使用Array.from()。

// 错误的删除方式示例（可能跳过元素）
// const childrenToDelete = parent.children; // 实时集合
// for (let i = 0; i < childrenToDelete.length; i++) {
//     parent.removeChild(childrenToDelete[i]); // 集合长度实时变化
// }

// 更安全的删除方式：转换为数组或从后往前遍历
// const childrenToDelete = Array.from(parent.children);
// for (const child of childrenToDelete) {
//     parent.removeChild(child);
// }

最后，关于性能。对于非常大的DOM结构，频繁地查询和操作DOM可能会带来性能开销。虽然现代浏览器在这方面优化得很好，但在循环中重复查询或者进行大量的DOM修改时，仍然需要警惕。批量操作、减少DOM操作次数、或者利用文档片段（DocumentFragment）来构建DOM再一次性插入，都是提升性能的有效手段。

总的来说，理解childNodes和children的区别，掌握遍历和筛选的方法，并对实时集合的特性有所防备，就能让你在处理DOM子节点时更加游刃有余。选择最适合当前任务的API，是高效开发的关键。

今天关于《JS获取子节点列表的几种方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！