如何遍历 DOM - Javascript

在前端开发中，遍历 DOM（文档对象模型）是经常需要做的事情之一。DOM 是表示 HTML 和 XML 文档的标准，它构建了文档的树形结构，我们可以通过遍历 DOM 树来获取文档的各个部分，从而对其进行操作。

获取 DOM 元素

在开始遍历 DOM 之前，我们需要获取到 DOM 元素。在 Javascript 中，我们可以通过以下几种方式来获取 DOM 元素。

通过 id 获取元素

const element = document.getElementById('my-element');

通过标签名获取元素列表

const elements = document.getElementsByTagName('div');

通过类名获取元素列表

const elements = document.getElementsByClassName('my-class');

通过选择器获取元素列表

const elements = document.querySelectorAll('.my-selector');

遍历 DOM

遍历子节点

我们可以使用 childNodes 属性来遍历元素的子节点，它返回一个 NodeList 对象。

const parent = document.getElementById('my-parent');
const children = parent.childNodes;

for (let i = 0; i < children.length; i++) {
    console.log(children[i]);
}

遍历子元素

我们也可以使用 children 属性来遍历元素的子元素，它返回一个 HTMLCollection 对象。

const parent = document.getElementById('my-parent');
const elements = parent.children;

for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

遍历祖先节点

我们可以使用 parentNode 属性来遍历元素的祖先节点，直到达到文档根节点为止。

const element = document.getElementById('my-element');
let ancestor = element.parentNode;

while (ancestor !== document) {
    console.log(ancestor);
    ancestor = ancestor.parentNode;
}

遍历同级节点

我们可以使用 nextSibling 和 previousSibling 属性来遍历元素的同级节点。

const element = document.getElementById('my-element');
let sibling = element.nextSibling;

while (sibling !== null) {
    console.log(sibling);
    sibling = sibling.nextSibling;
}

const element = document.getElementById('my-element');
let sibling = element.previousSibling;

while (sibling !== null) {
    console.log(sibling);
    sibling = sibling.previousSibling;
}

结语

遍历 DOM 是前端开发中非常重要的技能之一，它能够帮助我们对网页进行精细的控制和操作。掌握了遍历 DOM 的基本方法后，我们可以更好地实现许多应用程序和网页功能。