掌握DOM树遍历技巧 JavaScript开发者必知的节点操作与性能优化实战指南

// 遍历NodeList
listItems.forEach((item, index) => {
console.log(`Item ${index + 1}: ${item.textContent}`);
});
// 输出:
// Item 1: Item 1
// Item 2: Item 2

// 使用getElementsByClassName（动态）
const paragraphs = document.getElementsByClassName(‘text’);
console.log(paragraphs[0].textContent); // “Hello World”
注意
：
querySelectorAll
返回静态NodeList，适合大多数场景；
getElementsByClassName
返回动态集合，如果DOM变化，集合会自动更新，但可能影响性能。
3. 从元素开始遍历
一旦获取元素，我们可以使用以下属性导航：
父子关系
：
parentNode
：父节点。
childNodes
：所有子节点（包括文本和元素）。
children
：仅元素子节点。
firstChild
/
firstElementChild
：第一个子节点/元素。
lastChild
/
lastElementChild
：最后一个子节点/元素。
兄弟关系
：
previousSibling
/
previousElementSibling
：上一个兄弟节点/元素。
nextSibling
/
nextElementSibling
：下一个兄弟节点/元素。
示例：遍历

的子元素
const ul = document.querySelector(‘#container ul’);
console.log(ul.children.length); // 2 (仅
• 元素)

  // 遍历所有子节点（包括文本）
  ul.childNodes.forEach(node => {
  if (node.nodeType === Node.ELEMENT_NODE) { // 过滤元素节点
  console.log(node.tagName); // “LI”, “LI”
  }
  });

  // 获取第一个

• const firstLi = ul.firstElementChild;
  console.log(firstLi.textContent); // “Item 1”

  // 获取下一个兄弟
  const secondLi = firstLi.nextElementSibling;
  console.log(secondLi.textContent); // “Item 2”
  这些基本方法是遍历的基石。在实际代码中，优先使用
  children
  和
  querySelectorAll
  ，因为它们更高效且易读。
  高级遍历技巧：层级导航与自定义遍历
  对于复杂DOM，我们需要更高级的技巧，如深度优先遍历（DFS）或广度优先遍历（BFS），以及使用递归或迭代器。
  1. 深度优先遍历（DFS）
  DFS从根节点开始，递归访问每个子节点，直到叶子节点。常用于搜索特定元素或应用样式。
  示例：递归遍历所有元素节点
  function traverseDFS(node, callback) {
  if (node.nodeType === Node.ELEMENT_NODE) {
  callback(node); // 处理当前元素
  }
  // 遍历子节点
  const children = node.children;
  for (let i = 0; i < children.length; i++) { traverseDFS(children[i], callback); } } // 使用：为所有元素添加data-depth属性 traverseDFS(document.body, (element) => {
  element.setAttribute(‘data-depth’, ‘traversed’);
  console.log(`Traversed: ${element.tagName}`);
  });
  // 输出: TRAVERSED: BODY, DIV, P, SPAN, UL, LI, LI 等
  2. 广度优先遍历（BFS）
  BFS按层级遍历，先访问根，然后子节点，再孙节点。使用队列实现，适合查找最近匹配。
  示例：BFS查找特定类名的元素
  function traverseBFS(root, targetClass) {
  const queue = [root];
  while (queue.length > 0) {
  const node = queue.shift(); // 取出队首
  if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(targetClass)) {
  return node; // 找到目标
  }
  // 将子节点加入队列
  const children = node.children;
  for (let i = 0; i < children.length; i++) { queue.push(children[i]); } } return null; // 未找到 } // 使用：查找第一个有'text'类的元素 const target = traverseBFS(document.body, 'text'); console.log(target); //

  …

  3. 使用TreeWalker API（高效遍历）
  浏览器原生提供
  TreeWalker
  ，用于高效遍历DOM树，无需递归。
  示例：
  const walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT, // 只显示元素节点
  null, // 过滤器（可选）
  false // 实体引用扩展（通常false）
  );

  let node;
  while (node = walker.nextNode()) { // 前进遍历
  console.log(node.tagName);
  if (node.tagName === ‘SPAN’) {
  break; // 停止
  }
  }
  TreeWalker比递归更快，尤其在大型DOM中，因为它避免了函数调用开销。
  4. 自定义遍历：使用迭代器
  ES6引入迭代器，可用于创建可遍历的DOM序列。
  示例：生成器函数遍历
  function* traverseGenerator(node) {
  yield node;
  for (const child of node.children) {
  yield* traverseGenerator(child); // 递归生成器
  }
  }

  // 使用
  for (const element of traverseGenerator(document.body)) {
  if (element.tagName === ‘P’) {
  console.log(‘Found P:’, element);
  break;
  }
  }
  这些高级技巧适用于框架开发或性能敏感场景，如虚拟DOM的diffing。
  节点操作：修改与创建DOM
  遍历后，我们常需操作节点：创建、插入、删除或修改。
  1. 创建节点
  document.createElement(tagName)
  ：创建元素。
  document.createTextNode(text)
  ：创建文本节点。
  示例：
  const newDiv = document.createElement(‘div’);
  newDiv.className = ‘new-item’;
  newDiv.textContent = ‘New Content’;

  const textNode = document.createTextNode(‘ Added text’);
  newDiv.appendChild(textNode);
  2. 插入节点
  appendChild(node)
  ：追加到末尾。
  insertBefore(newNode, referenceNode)
  ：插入到指定位置。
  prepend()
  ：追加到开头（现代API）。
  示例：动态添加列表项
  const ul = document.querySelector(‘#container ul’);
  const newItem = document.createElement(‘li’);
  newItem.textContent = ‘Item 3’;

  // 追加
  ul.appendChild(newItem);

  // 插入到第一个

• 前
  const firstLi = ul.firstElementChild;
  ul.insertBefore(newItem, firstLi);

  // 或使用prepend（ES2020）
  ul.prepend(newItem);
  3. 删除与替换节点
  removeChild(node)
  ：删除子节点。
  replaceChild(newNode, oldNode)
  ：替换节点。
  示例：
  const secondLi = ul.children[1];
  ul.removeChild(secondLi); // 删除”Item 2″

  // 替换第一个

• const oldLi = ul.firstElementChild;
  const newLi = document.createElement(‘li’);
  newLi.textContent = ‘Replaced Item’;
  ul.replaceChild(newLi, oldLi);
  4. 修改节点属性与样式
  setAttribute(name, value)
  /
  getAttribute(name)
  ：属性操作。
  classList.add/remove/toggle
  ：类名操作。
  style.property
  ：内联样式。
  示例：
  const p = document.querySelector(‘.text’);
  p.setAttribute(‘data-custom’, ‘value’);
  p.classList.add(‘highlight’);
  p.style.color = ‘red’;
  p.style.fontSize = ’20px’;
  批量操作技巧
  ：对于多次插入，使用
  DocumentFragment
  避免多次重排。
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 10; i++) { const li = document.createElement('li'); li.textContent = `Fragment Item ${i}`; fragment.appendChild(li); } ul.appendChild(fragment); // 一次性插入 性能优化：避免常见陷阱 DOM操作是浏览器中最耗时的操作之一，因为每次修改都可能触发重排（reflow）和重绘（repaint）。优化DOM遍历和操作是提升性能的关键。 1. 选择器性能 优先使用ID选择器（ #id ），因为浏览器内部使用哈希表。 避免深层嵌套选择器，如 body div ul li ，改用类或ID。 缓存查询结果：不要在循环中重复调用 querySelector 。 坏例子： // 低效：每次循环查询DOM for (let i = 0; i < 100; i++) { document.querySelector('#container').appendChild(document.createElement('div')); } 好例子： const container = document.getElementById('container'); // 缓存 for (let i = 0; i < 100; i++) { container.appendChild(document.createElement('div')); } 2. 减少DOM访问 使用局部变量存储DOM引用。 避免在循环中读取 offsetHeight 等布局属性，这会强制浏览器计算布局。 示例：优化遍历 // 低效：每次迭代访问children const items = document.querySelectorAll('#container ul li'); for (let i = 0; i < items.length; i++) { // items.length 每次计算 items[i].style.display = 'none'; } // 高效：缓存长度 const items = document.querySelectorAll('#container ul li'); const len = items.length; for (let i = 0; i < len; i++) { items[i].style.display = 'none'; } 3. 批量操作与虚拟DOM 使用 DocumentFragment 批量插入。 对于复杂更新，考虑使用 requestAnimationFrame 分批执行。 在框架中（如React），利用虚拟DOM最小化真实DOM更新。 示例：使用requestAnimationFrame优化大量更新 function updateElements() { const elements = document.querySelectorAll('.dynamic'); let index = 0; function step() { if (index < elements.length) { elements[index].textContent = 'Updated ' + index; index++; requestAnimationFrame(step); // 分批 } } requestAnimationFrame(step); } updateElements(); 4. 事件委托 遍历时绑定事件时，使用事件委托避免为每个子元素绑定监听器。 // 低效：为每个
• 绑定点击
  document.querySelectorAll(‘#container ul li’).forEach(li => {
  li.addEventListener(‘click’, () => console.log(‘Clicked’));
  });

  // 高效：委托给父元素
  document.querySelector(‘#container ul’).addEventListener(‘click’, (e) => {
  if (e.target.tagName === ‘LI’) {
  console.log(‘Clicked LI:’, e.target.textContent);
  }
  });
  5. 内存优化
  删除节点后，移除事件监听器（使用
  removeEventListener
  ）。
  避免循环引用：在遍历中使用弱引用或及时清理。
  示例：清理事件
  function addListeners() {
  const items = document.querySelectorAll(‘li’);
  items.forEach(item => {
  item.addEventListener(‘click’, handleClick);
  });
  }

  function removeListeners() {
  const items = document.querySelectorAll(‘li’);
  items.forEach(item => {
  item.removeEventListener(‘click’, handleClick);
  });
  }

  function handleClick(e) {
  console.log(‘Handled:’, e.target.textContent);
  }
  6. 性能测量
  使用浏览器DevTools（如Chrome的Performance面板）记录DOM操作时间。目标：单次操作<16ms（60fps）。 实战案例：构建动态列表应用 让我们通过一个完整示例应用上述技巧：创建一个动态Todo列表，支持添加、删除和遍历。 HTML结构

  
  Add

  Traverse & Highlight

  JavaScript代码
  // 缓存DOM元素
  const input = document.getElementById(‘input’);
  const addBtn = document.getElementById(‘add’);
  const list = document.getElementById(‘todo-list’);
  const traverseBtn = document.getElementById(‘traverse’);

  // 状态管理（避免直接操作DOM）
  let todos = [];

  // 添加Todo（批量操作）
  addBtn.addEventListener(‘click’, () => {
  const text = input.value.trim();
  if (!text) return;

  todos.push(text);
  input.value = ”;

  // 使用DocumentFragment批量插入
  const fragment = document.createDocumentFragment();
  const li = document.createElement(‘li’);
  li.textContent = text;
  li.className = ‘todo-item’;

  // 添加删除按钮
  const deleteBtn = document.createElement(‘button’);
  deleteBtn.textContent = ‘Delete’;
  deleteBtn.style.marginLeft = ’10px’;
  deleteBtn.addEventListener(‘click’, (e) => {
  e.stopPropagation(); // 防止冒泡
  const index = todos.indexOf(text);
  if (index > -1) todos.splice(index, 1);
  list.removeChild(li); // 删除节点
  });

  li.appendChild(deleteBtn);
  fragment.appendChild(li);
  list.appendChild(fragment);

  // 清空输入焦点，避免重排
  input.blur();
  });

  // 事件委托处理删除（优化）
  list.addEventListener(‘click’, (e) => {
  if (e.target.tagName === ‘BUTTON’) {
  // 已在addBtn中处理，但这里可扩展
  }
  });

  // 遍历并高亮（使用TreeWalker优化）
  traverseBtn.addEventListener(‘click’, () => {
  const walker = document.createTreeWalker(
  list,
  NodeFilter.SHOW_ELEMENT,
  {
  acceptNode: (node) => {
  if (node.classList.contains(‘todo-item’)) {
  return NodeFilter.FILTER_ACCEPT;
  }
  return NodeFilter.FILTER_SKIP;
  }
  }
  );

  let node;
  while (node = walker.nextNode()) {
  node.style.backgroundColor = ‘yellow’;
  node.style.transition = ‘background-color 0.3s’;

  // 延迟重置以演示
  setTimeout(() => {
  node.style.backgroundColor = ”;
  }, 1000);
  }

  console.log(`Traversed ${list.children.length} items`);
  });

  // 性能优化：防抖输入（避免频繁DOM更新）
  let debounceTimer;
  input.addEventListener(‘input’, () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
  // 可在这里预览输入，但不操作DOM
  console.log(‘Input debounced’);
  }, 300);
  });
  示例运行说明
  在浏览器中加载HTML和JS。
  输入文本并点击Add，添加多个项。
  点击Traverse & Highlight，观察列表项高亮（使用TreeWalker高效遍历）。
  点击Delete删除项，使用事件委托避免为每个按钮绑定监听器。
  在DevTools中观察：批量插入使用Fragment减少重排；遍历使用TreeWalker避免递归开销。
  这个案例展示了从遍历到操作的全流程，性能优化点包括缓存、委托和批量处理。实际项目中，可扩展为React组件或集成状态管理。
  结论与最佳实践
  掌握DOM树遍历技巧是JavaScript开发的核心，能显著提升应用性能和代码质量。关键要点：
  优先现代API
  ：如
  querySelector
  、
  TreeWalker
  和
  DocumentFragment
  。
  最小化DOM交互
  ：缓存引用、批量操作、事件委托。
  测量与迭代
  ：使用DevTools监控性能，针对瓶颈优化。
  结合框架
  ：在React/Vue中，理解原生DOM有助于调试虚拟DOM。
  通过实践这些技巧，你能构建响应迅速、用户友好的Web应用。建议从简单项目开始，逐步应用高级遍历和优化。持续学习最新浏览器特性（如Shadow DOM遍历）将保持你的技能领先。如果遇到具体问题，参考MDN文档或浏览器规范以获取最新信息。