如何遍历 dom 对象 JavaScript

介绍

遍历 DOM（文档对象模型）是指在 HTML 或 XML 文档中找到特定元素并对其执行操作的过程。在 JavaScript 中，可以使用各种方法来遍历 DOM 元素。本文将介绍一些常用的方法。

代码

遍历 HTML 元素

要遍历 HTML 元素，可以使用以下方法之一：

• getElementsByTagName: 通过标记名称获取元素
• getElementsByClassName: 通过类名获取元素
• getElementById: 通过 ID 获取元素

// 遍历所有的 <p> 元素
let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
  // 执行操作
}

// 遍历所有的 class 为 "example" 的元素
let examples = document.getElementsByClassName("example");
for (let i = 0; i < examples.length; i++) {
  // 执行操作
}

// 遍历 ID 为 "main" 的元素
let mainElement = document.getElementById("main");
// 执行操作

遍历 HTML 元素的子元素

要遍历 HTML 元素的子元素，可以使用以下方法之一：

• childNodes: 获取所有子节点（包括文本节点和元素节点）
• children: 获取所有子元素节点

// 遍历 <ul> 元素的所有子节点
let ul = document.getElementById("myList");
let childNodes = ul.childNodes;
for (let i = 0; i < childNodes.length; i++) {
  // 执行操作
}

// 遍历 <ul> 元素的所有子元素
let ul = document.getElementById("myList");
let children = ul.children;
for (let i = 0; i < children.length; i++) {
  // 执行操作
}

遍历 HTML 元素的父元素和兄弟元素

要遍历 HTML 元素的父元素和兄弟元素，可以使用以下方法之一：

• parentNode: 获取父节点
• previousSibling: 获取前一个兄弟节点
• nextSibling: 获取后一个兄弟节点

// 遍历某个节点的父节点
let childElement = document.getElementById("myChild");
let parentElement = childElement.parentNode;
// 执行操作

// 遍历某个节点的前一个兄弟节点
let nextElement = childElement.previousSibling;
// 执行操作

// 遍历某个节点的后一个兄弟节点
let previousElement = childElement.nextSibling;
// 执行操作

总结

以上是遍历 DOM 对象的一些常用方法，它们可以帮助我们在页面中执行特定的操作。在实际开发中，我们需要选择合适的方法来遍历元素，并根据需要执行相应的操作。