Chrome扩展内容脚本：遍历节点子元素的while循环条件疑问

嘿，这个场景我在写Chrome扩展内容脚本的时候太熟悉了！咱们来聊聊怎么用while循环搞定所有子节点的遍历——不管节点嵌套多少层，都能处理到最底层。

两种常见的遍历场景 #

1. 只处理当前节点的直接子节点 #

如果你的需求只是处理某个节点的一级子节点（不深入嵌套的子节点），可以用索引配合children.length作为while循环的终止条件：

// 以nodeArray中的第一个节点为例
const parentNode = nodeArray[0];
// 先把children存为变量，避免HTMLCollection动态变化带来的问题
const directChildren = parentNode.children;
let index = 0;

while (index < directChildren.length) {
  const childNode = directChildren[index];
  // 在这里执行你的业务代码，比如提取文本、修改属性等
  console.log('处理直接子节点:', childNode.textContent);
  
  index++;
}

为什么要先存directChildren？因为HTMLCollection是动态集合——如果遍历过程中DOM结构发生变化（虽然你的场景是整理选中元素，大概率不会变），它的length会自动更新，提前存下来能避免遍历异常。

2. 遍历所有层级的后代节点（直到没有子节点为止） #

如果需要深入到最底层的子节点（比如<h1>→<span>→更深的嵌套节点），单纯的索引循环不够用，我们可以用**栈（深度优先）或队列（广度优先）**配合while循环来实现：

深度优先遍历（先处理子节点，再处理兄弟节点）

适合需要按嵌套层级深入的场景：

// 初始化栈，把需要处理的初始节点都放进去
const nodeStack = [...nodeArray];

while (nodeStack.length > 0) {
  // 弹出栈顶的节点（最后加入的先处理）
  const currentNode = nodeStack.pop();
  
  // 先处理当前节点的业务逻辑
  console.log('处理节点:', currentNode.tagName, currentNode.textContent);
  
  // 把当前节点的子节点倒序加入栈，保证遍历顺序是从左到右
  const childNodes = [...currentNode.children];
  for (let i = childNodes.length - 1; i >= 0; i--) {
    nodeStack.push(childNodes[i]);
  }
}

广度优先遍历（先处理同级节点，再处理子节点）

适合需要按层级从上到下处理的场景：

// 初始化队列，把需要处理的初始节点都放进去
const nodeQueue = [...nodeArray];

while (nodeQueue.length > 0) {
  // 弹出队列头部的节点（最先加入的先处理）
  const currentNode = nodeQueue.shift();
  
  // 处理当前节点的业务逻辑
  console.log('处理节点:', currentNode.tagName, currentNode.textContent);
  
  // 把当前节点的子节点按顺序加入队列
  const childNodes = [...currentNode.children];
  nodeQueue.push(...childNodes);
}

这里的while循环终止条件很简单：当栈/队列的长度为0时，说明所有节点（包括所有层级的子节点）都处理完毕了。

额外技巧：跟踪节点层级 #

如果需要记录每个节点的嵌套深度（方便整理文本结构），可以在栈/队列中存储节点+深度的对象：

const nodeStack = nodeArray.map(node => ({ node, depth: 0 }));

while (nodeStack.length > 0) {
  const { node, depth } = nodeStack.pop();
  console.log(`深度${depth}: ${node.tagName} - ${node.textContent}`);
  
  const childNodes = [...node.children];
  for (let i = childNodes.length - 1; i >= 0; i--) {
    nodeStack.push({ node: childNodes[i], depth: depth + 1 });
  }
}

这样就能清晰看到每个节点在DOM树中的位置啦！

内容的提问来源于stack exchange，提问作者jbright