JavaScript遍历DOM元素的常见方式示例

当我们需要操作DOM以实现页面的交互效果时，我们需要遍历DOM元素。以下是几种常见的JavaScript遍历DOM的方式：

1. 通过节点关系遍历

在DOM中，节点之间有父子、兄弟、前后关系，利用这些关系可以方便地遍历DOM节点。主要有以下几个属性和方法：

• parentNode：获取当前节点的父节点；
• childNodes：获取当前节点的所有子节点（注意，子节点包括元素节点、文本节点、注释节点等）；
• children：获取当前节点的所有元素子节点（即不包括文本节点、注释节点等）；
• nextSibling：获取当前节点的下一个兄弟节点；
• previousSibling：获取当前节点的上一个兄弟节点。

示例1：获取一个元素的所有子元素

let parent = document.querySelector('.parent'); // 获取父元素
let children = parent.children; // 获取父元素的所有子元素

for (let i = 0; i < children.length; i++) {
  console.log(children[i]); // 输出每个子元素
}

示例2：获取一个元素的所有兄弟元素

let curEle = document.querySelector('.curEle'); // 获取当前元素
let prevEle = curEle.previousSibling; // 获取前一个兄弟元素
let nextEle = curEle.nextSibling; // 获取后一个兄弟元素

2. 通过选择器选择DOM元素

可以使用 querySelector 和 querySelectorAll 方法来选择符合特定规则的DOM元素。 querySelector 只会选择一个元素，而 querySelectorAll 会选择所有符合条件的元素。

示例3：选择所有元素标签为 div 的元素

let divs = document.querySelectorAll('div');

for (let i = 0; i < divs.length; i++) {
  console.log(divs[i]); // 输出每个 div 元素
}

示例4：选择类名为 .myClass 的元素

let myElements = document.querySelectorAll('.myClass');

for (let i = 0; i < myElements.length; i++) {
  console.log(myElements[i]); // 输出每个类名为 myClass 的元素
}

以上是常见的两种JavaScript遍历DOM元素的方式，通过掌握这些遍历技巧可以更有效地操作DOM，达到更好的用户交互效果。