节点树包含所有节点类型，元素树仅含元素节点；2. childnodes遍历所有子节点，children仅遍历元素子节点，二者分别用于不同遍历需求。
在 javaScript 中操作网页内容，离不开对 dom（文档对象模型）的遍历。DOM 是以树形结构组织的节点集合，包含元素、文本、注释等多种节点类型。理解如何遍历节点树和元素树，是实现高效 DOM 操作的基础。
节点树与元素树的区别
DOM 树中的每个对象都是一个 节点（Node），而 元素（Element） 只是节点的一种类型。常见的节点类型包括：
- 元素节点（Element） – 如 <div>, <p>
- 文本节点（Text） – 元素内的文字内容
- 注释节点（Comment） – <!– 注释 –>
- 文档节点（Document） – 根节点
因此，节点树 包含所有类型的节点，而 元素树 只包含 html 元素节点。遍历时是否包含非元素节点，决定了使用哪种方法。
遍历节点树：使用 childNodes 和 children
childNodes 返回 NodeList，包含当前元素的所有子节点，包括文本、注释等。例如：
立即学习“Java免费学习笔记（深入）”；
const parent = document.getElementById(‘container’);
parent.childNodes.forEach(node => {
console.log(node.nodeType, node.nodeName);
});
如果只想获取元素节点，应使用 children 属性，它返回一个只包含元素节点的 HTMLCollection：
const elementChildren = parent.children;
for (let i = 0; i
console.log(elementChildren[i].tagName);
}
深度优先遍历：递归处理所有节点
若需访问每一个节点（包括文本和注释），可使用递归方式遍历整个节点树：
function traverseNodes(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
console.log(‘元素:’, node.tagName);
} else if (node.nodeType === Node.TEXT_NODE) {
console.log(‘文本:’, node.textContent.trim());
} else if (node.nodeType === Node.COMMENT_NODE) {
console.log(‘注释:’, node.nodeValue);
}
node.childNodes.foreach(traverseNodes);
}
traverseNodes(document.body);
使用 TreeWalker 高级遍历工具
对于复杂场景，DOM 提供了 TreeWalker 接口，可灵活控制遍历过程：
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_ELEMENT, // 只显示元素
{ acceptNode() { return NodeFilter.FILTER_ACCEPT; } }
);
let node;
while ((node = walker.nextNode())) {
console.log(‘找到元素:’, node.tagName);
}
TreeWalker 支持过滤、前后移动，适合需要条件筛选或跳过某些节点的场景。
基本上就这些。根据需求选择合适的遍历方式：简单操作用 children，精细控制用 TreeWalker，全面访问用递归 + childNodes。关键是清楚你要处理的是“所有节点”还是“仅元素”。