js那些常用的遍历节点的方法

概述

在 JavaScript 中，遍历 DOM 节点（文档对象模型）的方法有多种。以下是一些常用的遍历节点的方法：
https://www.cnblogs.com/dalaoban/p/9498218.html

1. 递归遍历：

递归是一种深度优先遍历 DOM 结构的方法。你可以编写递归函数来遍历 DOM 树的各个节点，访问它们的属性和执行操作。这是一种灵活但需要小心处理的方法。

function traverse(node) {
  // 处理当前节点
  console.log(node);

  // 递归遍历子节点
  for (let i = 0; i < node.childNodes.length; i++) {
    traverse(node.childNodes[i]);
  }
}

// 开始遍历整个文档
traverse(document);

2. querySelector 和 querySelectorAll：

querySelector 和 querySelectorAll 允许你通过 CSS 选择器选择特定的节点或一组节点。这些方法返回匹配选择器的第一个节点（querySelector）或所有匹配的节点（querySelectorAll）。

const element = document.querySelector('.my-class'); // 选择第一个匹配的节点
const elements = document.querySelectorAll('p'); // 选择所有匹配的节点

3. getElementById 和 getElementsByClassName：

getElementById 和 getElementsByClassName 分别用于根据元素的 ID 和类名来获取节点。这些方法可以快速定位到特定节点。

const elementById = document.getElementById('my-element'); // 通过 ID 获取节点
const elementsByClass = document.getElementsByClassName('my-class'); // 通过类名获取节点

4. 遍历父子节点：

DOM 节点通常有 parentNode 属性来获取父节点，以及 childNodes 属性来获取子节点。你可以使用这些属性来遍历父节点和子节点。

const parent = element.parentNode; // 获取父节点
const children = element.childNodes; // 获取所有子节点

5. 遍历兄弟节点：

使用 nextSibling 和 previousSibling 属性可以访问节点的下一个兄弟节点和上一个兄弟节点。

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

6. 使用 DOM 遍历方法：

DOM 提供了一些遍历节点的方法，如 firstChild、lastChild、nextElementSibling、previousElementSibling 等。

const firstChild = element.firstChild; // 获取第一个子节点
const lastChild = element.lastChild; // 获取最后一个子节点
const nextElementSibling = element.nextElementSibling; // 获取下一个兄弟元素节点

这些方法提供了多种方式来遍历 DOM 节点，你可以根据需要选择最适合你的方法。注意，一些方法可能返回文本节点等非元素节点，因此需要小心处理。