跳到主要内容位置

遍历 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 元素的 nextElementSiblingpreviousElementSibling 属性,分别用于获取上一个节点和下一个节点。例如下面的 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>
提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买