开发Chrome扩展时如何遍历所有嵌套DOM子元素避免冗余嵌套循环代码

API 探路者

2026-9-30

最优实现方案

你可以直接用DOM内置的全量选择器实现任意层级元素遍历，代码可简化为：

// 选中body下所有层级的所有元素，统一设置圆角
document.body.querySelectorAll('*').forEach(element => {
  // 直接修改style属性不会覆盖元素原有其他行内样式，比setAttribute更安全
  element.style.borderRadius = '30px'
})

querySelectorAll('*')会自动匹配所有后代元素，无论嵌套多少层都能覆盖，不需要手动写多层循环。

自定义遍历的可选实现

如果你需要在遍历过程中加入自定义判断逻辑（比如跳过特定标签的元素），可以用递归或者广度优先遍历实现：

递归实现

function setElementRadius(el) {
  el.style.borderRadius = '30px'
  // 遍历所有子元素递归处理
  for (const child of el.children) {
    setElementRadius(child)
  }
}
// 从body根节点启动遍历
setElementRadius(document.body)

广度优先遍历（避免深层DOM递归栈溢出）

如果页面DOM嵌套层级极深，递归可能触发栈溢出，可以用队列/栈的迭代方式实现：

const taskQueue = [document.body]
while (taskQueue.length > 0) {
  const currentEl = taskQueue.shift()
  currentEl.style.borderRadius = '30px'
  // 把当前元素的所有子节点加入待处理队列
  taskQueue.push(...currentEl.children)
}