遍历 DOM 节点

在获取到某个 DOM 元素之后，可以通过 DOM 元素提供的遍历 API 来获取它的子节点、兄弟节点和父节点。通过遍历，我们可以获取其它相关节点的信息，以便于实现相关的业务逻辑。

接下来我们分别看一下常见的遍历方法。

获取子节点

要获取一个 DOM 元素的子节点，可以访问它的 children 属性，例如我们有如下列表元素：

<ul id="bookList">
  <li>JavaScript 基础语法详解</li>
  <li>Vue 完全指南与实战</li>
  <li>React 从入门到实战</li>
</ul>

如果要获取它的所有 li 子元素，可以在 javascript 中这样写：

const bookList = document.getElementById("bookList");
bookList.children; // 获取所有子节点 [li, li, li]

children 属性获取出来的子元素列表是一个类数组结构，可以使用 for 循环或者 for...of 循环遍历所有元素：

// ["JavaScript 基础语法详解", "Vue 完全指南与实战", "React 从入门到实战]";
for (const li of bookList.children) {
  console.log(li.innerText);
}

获取父节点

获取父节点的方法是访问 DOM 元素的 parentNode 属性，例如下面的 HTML 结构：

<div class="parentContainer">
  <p id="paragraph">一个段落</p>
</div>

要获取 p 元素的父节点，也就是 div 元素，可以使用下方代码：

const p = document.getElementById("paragraph");
p.parentNode; // <div class="parentContainer">...</div>

获取兄弟节点

获取兄弟节点的方法是访问 DOM 元素的 nextElementSibling 和 previousElementSibling 属性，分别用于获取上一个节点和下一个节点。例如下面的 HTML 结构：

<p>段落 1</p>
<p id="paragraph2">段落 2</p>
<p>段落 3</p>

获取 id 为 paragraph2 的 p 元素的上一个兄弟节点和下一个兄弟节点，可以使用下方代码：

const p2 = document.getElementById("paragraph2");
console.log(p2.previousElementSibling); // <p>段落 1<p>
console.log(p2.nextElementSibling); // <p>段落 3<p>