使用 JavaScript 遍历所有 DOM 元素

作者

使用 JavaScript 遍历所有 DOM 元素

Loop through all DOM elements using JavaScript

遍历所有 DOM 元素：

  1. 使用getElementsByTagName()方法获取HTMLCollection包含所有 DOM 元素的 。
  2. 使用for...of循环遍历集合。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const allElements = document.getElementsByTagName('*');

// ✅ Loop through all elements (including html, head, meta, scripts)
for (const element of allElements) {
  console.log(element);
}

console.log('--------------------');

// ✅ Loop through all elements in body
const allInBody = document.querySelectorAll('body > *');
for (const element of allInBody) {
  console.log(element);
}

document.getElementsByTagName
方法返回一个HTMLCollection包含具有提供的标签名称的元素。

如果该方法传递一个星号*作为参数，它会返回一个包含所有 DOM 元素的集合。

我们使用
for…of
循环来遍历集合。

请注意，
如果满足特定条件，您可以使用break关键字来跳出循环。for

索引.js
const allElements = document.getElementsByTagName('*');

for (const element of allElements) {
  console.log(element);

  if (element.textContent === 'Box 2') {
    break;
  }
}

上面的选择器包含了所有的 DOM 元素，包括html
元素、head元素等。

如果您只需要遍历body标记中包含的元素，请使用该document.querySelectorAll()方法。

索引.js
const allInBody = document.querySelectorAll('body > *');

for (const element of allInBody) {
  console.log(element);
}

querySelectorAll方法将

包含 CSS 选择器的字符串作为参数，并返回
NodeList包含匹配元素的 。

我们使用了一个for...of循环来遍历NodeList，但是您也可以使用
forEach
方法。

索引.js
const allInBody = document.querySelectorAll('body > *');

allInBody.forEach(element => {
  console.log(element);
});

我们传递给该forEach()方法的函数会随NodeList.

请注意，使用该方法break时不支持该关键字。 forEach

该querySelectorAll()方法可以传递一个或多个逗号分隔的选择器。

下面的示例选择所有具有类my-class和
的元素your-class。

索引.js
const elements = document.querySelectorAll(
  '.my-class, .your-class'
);

elements.forEach(element => {
  console.log(element);
});

您可以根据需要将尽可能多的逗号分隔选择器传递给该方法。

如果您不需要遍历 DOM 中的每个元素，这可能是一个更有效的解决方案。

–

发表评论