HTML中如何遍历DOM树查找目标元素-html教程-PHP中文网

queryselectorall()返回静态nodelist，一次性获取所有匹配元素；支持复杂css选择器，但不自动更新动态插入元素，需手动处理shadow dom。

html中如何遍历dom树查找目标元素

用 `querySelectorAll` 一次性获取所有匹配元素最省事

多数时候你并不需要“遍历树”，而是想拿到符合某类条件的元素集合。querySelectorAll 内部已由浏览器优化，比手写递归快得多，且天然支持复杂选择器（如 "div > .item[data-id='123']"）。

常见错误是误以为它返回数组——实际是 NodeList，不能直接调用 map 或 forEach（老版本 IE 不支持 forEach），需转成数组或用 for...of：

const items = document.querySelectorAll('.card');
for (const el of items) {
  el.classList.add('processed');
}

注意：如果页面后续动态插入新元素，querySelectorAll 不会自动更新结果，它是一次性快照。

需要深度优先遍历？用 `element.children` 而非 `element.childNodes`

childNodes 包含文本节点、注释节点，容易在遍历时意外命中空白文本（比如换行缩进），导致 el.nodeType !== 1 判断冗余；而 children 只返回元素节点，更干净。

典型场景：查找某个容器内所有带 data-role="tooltip" 的子元素，不管嵌套几层：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

function findAllTooltips(root) {
  const result = [];
  function walk(el) {
    if (el.dataset.role === 'tooltip') result.push(el);
    for (const child of el.children) walk(child);
  }
  walk(root);
  return result;
}

递归深度大时可能栈溢出，超深 DOM 建议改用栈模拟（Array 存待处理节点）
避免用 getElementsByTagName('*') —— 它返回实时集合，每次访问都重新计算，性能差

遇到 Shadow DOM 怎么办？`shadowRoot` 必须显式进入

现代组件库（如 Lit、Stencil）常封装 Shadow DOM，querySelectorAll 默认查不到里面的内容。必须手动检查并递进：

function deepQuery(root, selector) {
  const result = [...root.querySelectorAll(selector)];
  if (root.shadowRoot) {
    result.push(...root.shadowRoot.querySelectorAll(selector));
  }
  for (const el of root.children) {
    result.push(...deepQuery(el, selector));
  }
  return result;
}

关键点：