使用 JavaScript 按属性名称选择元素

Select Elements by Attribute Name using JavaScript

要通过属性名称选择元素，请将带有属性名称的选择器传递给querySelectorAll()方法，例如
document.querySelectorAll('[title]'). 该querySelectorAll方法将返回具有提供的属性集的元素的集合。

这是文章中示例的 html。

索引.html


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

  <body>
    <div title="first">Box 1</div>
    <div title="second">Box 2</div>

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

这是相关的 JavaScript 代码。

索引.js


// ✅ All elements with `title` attribute
const elements = document.querySelectorAll('[title]');
console.log(elements); // 👉️ [div, div]

// ✅ First element with `title` attribute
const element = document.querySelector('[title]');
console.log(element); // 👉️ div

第一个示例使用
document.querySelectorAll()
方法获取具有title属性集的所有元素的集合。

第二个示例使用
document.querySelector()
方法获取文档中具有title属性集的第一个元素。

简而言之，如果您需要一个元素集合，请使用该
document.querySelectorAll方法，如果您需要与提供的选择器匹配的第一个元素，请使用该document.querySelector方法。

div您还可以通过仅选择具有特定属性名称的元素来缩小范围。

索引.js


// ✅ Get `div` elements with `title` attribute
const elements = document.querySelectorAll('div[title]');
console.log(elements); // 👉️ [div, div]

该代码片段仅div针对具有title属性集的元素。

具有属性集的任何span或p元素都不会匹配查询。

另一种方法是从 DOM 中选择元素并迭代NodeList检查每个元素是否具有特定的属性集。

索引.js


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

const matches = [];

for (const element of elements) {
  if (element.hasAttribute('title')) {
    matches.push(element);
  }
}

console.log(matches); // 👉️ [div, div]

我们使用该getElementsByTagName方法来选择 DOM 中的所有元素。

您可以将其缩小到仅div或p元素以使用较小的集合。

下一步是使用
for…of
循环遍历NodeList.

在每次迭代中，我们检查元素是否具有title属性集，如果是，我们将元素推送到matches数组。

–