遍历 DOM 的方法

在 JavaScript 中，有几种主要的方法可以遍历 DOM（文档对象模型）。以下是常用的 DOM 遍历技术：

1. 基本节点关系

// 获取父节点
const parent = element.parentNode;

// 获取所有子节点（包括文本节点和注释节点）
const children = element.childNodes;

// 获取第一个子节点
const firstChild = element.firstChild;

// 获取最后一个子节点
const lastChild = element.lastChild;

// 获取前一个兄弟节点
const previousSibling = element.previousSibling;

// 获取下一个兄弟节点
const nextSibling = element.nextSibling;

2. 只遍历元素节点

// 获取父元素
const parentElement = element.parentElement;

// 获取子元素集合
const childrenElements = element.children;

// 获取第一个子元素
const firstElementChild = element.firstElementChild;

// 获取最后一个子元素
const lastElementChild = element.lastElementChild;

// 获取前一个兄弟元素
const previousElementSibling = element.previousElementSibling;

// 获取下一个兄弟元素
const nextElementSibling = element.nextElementSibling;

3. 选择器方法

// 通过ID获取元素
const element = document.getElementById('id');

// 通过类名获取元素集合
const elements = document.getElementsByClassName('class');

// 通过标签名获取元素集合
const elements = document.getElementsByTagName('div');

// 通过CSS选择器获取第一个匹配元素
const element = document.querySelector('.class');

// 通过CSS选择器获取所有匹配元素
const elements = document.querySelectorAll('div.class');

4. 遍历方法

深度优先遍历

// 递归遍历
function traverse(node) {
  // 处理当前节点
  console.log(node);
  
  // 遍历子节点
  for (let i = 0; i < node.children.length; i++) {
    traverse(node.children[i]);
  }
}

// 从body开始遍历
traverse(document.body);

广度优先遍历

function breadthFirstTraverse(root) {
  const queue = [root];
  
  while (queue.length > 0) {
    const node = queue.shift();
    console.log(node);
    
    // 将子节点加入队列
    for (let i = 0; i < node.children.length; i++) {
      queue.push(node.children[i]);
    }
  }
}

breadthFirstTraverse(document.body);

5. TreeWalker

// 创建TreeWalker对象
const walker = document.createTreeWalker(
  document.body, // 根节点
  NodeFilter.SHOW_ELEMENT, // 只显示元素节点
  null,
  false
);

// 遍历节点
let node;
while (node = walker.nextNode()) {
  console.log(node);
}

6. NodeIterator

const iterator = document.createNodeIterator(
  document.body, // 根节点
  NodeFilter.SHOW_ELEMENT, // 只显示元素节点
  null,
  false
);

let node;
while (node = iterator.nextNode()) {
  console.log(node);
}

注意事项

1. childNodes 和 children 的区别：

   • childNodes 返回所有类型的子节点（包括文本节点、注释节点等）
   • children 只返回元素节点

2. 现代浏览器推荐使用 querySelector 和 querySelectorAll，因为它们更灵活且性能更好

3. 遍历大型DOM树时要注意性能，避免不必要的重绘和回流

4. 在循环中修改DOM时要小心，因为这可能会影响遍历过程