如何按层次关系访问节点

按照层次关系访问节点，可以使用 DOM 的遍历方法来实现。以下是两种常见的遍历方法：

1. 递归遍历：

可以使用递归的方式来按层次关系访问节点，具体步骤如下：

- 获取当前节点
- 处理当前节点
- 获取当前节点的子节点
- 对于每个子节点，重复上述步骤

示例代码：

function traverse(node) {
  console.log(node); // 处理当前节点
  if (node.nodeType === Node.ELEMENT_NODE) { // 如果当前节点是元素节点，则继续遍历其子节点
    const children = node.childNodes;
    for (let i = 0; i < children.length; i++) {
      traverse(children[i]);
    }
  }
}

traverse(document.body); // 从文档的根节点开始遍历

2. 迭代遍历：

可以使用迭代的方式来按层次关系访问节点，具体步骤如下：

- 创建一个队列，将根节点入队
- 循环遍历队列中的节点，每次取出队首节点
- 处理当前节点
- 将当前节点的子节点加入队列

示例代码：

function traverse(root) {
  const queue = [root]; // 创建一个队列，将根节点入队
  while (queue.length) { // 循环遍历队列中的节点
    const node = queue.shift(); // 每次取出队首节点
    console.log(node); // 处理当前节点
    if (node.nodeType === Node.ELEMENT_NODE) { // 如果当前节点是元素节点，则将其子节点加入队列
      const children = node.childNodes;
      for (let i = 0; i < children.length; i++) {
        queue.push(children[i]);
      }
    }
  }
}

traverse(document.body); // 从文档的根节点开始遍历

以上两种方法可以按照层次关系访问节点，并且可以根据具体的需求进行修改。