使用 JavaScript 按属性获取 DOM 元素

Get DOM Element by Attribute using JavaScript

使用该querySelector()方法通过属性获取 DOM 元素，例如
document.querySelector('[data-id="first"]'). 该querySelector方法将返回文档中与指定属性匹配的第一个元素。

这是本文中示例的 html。

索引.html


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

  <body>
    <div data-id="first" class="box">Box 1</div>
    <div data-id="second" class="box">Box 2</div>

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

这是相关的 JavaScript 代码。

索引.js


// ✅ querySelector for single element
const el = document.querySelector('[data-id="first"]');
console.log(el); // 👉️ div

// ✅ querySelectorAll for all elements matching attribute
const elements = document.querySelectorAll('[class="box"');
console.log(elements); // 👉️ [div.box, div.box]

要根据特定属性值的部分匹配来选择元素，请向下滚动到下一个子标题。

第一个示例使用
document.querySelector
方法获取文档中data-id属性设置为的第一个元素first。

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

第二个示例选择文档中class
属性设置为的所有元素box。

div您还可以通过仅选择具有特定属性的元素或选择具有属性集的元素（而不考虑值）来缩小范围。

索引.js


// ✅ Get first div that has `data-id` attribute set to `first`
const el1 = document.querySelector('div[data-id="first"]');
console.log(el1); // 👉️ div.box

// ✅ Get first element that has a `data-id` attribute set
const el2 = document.querySelector('[data-id]');
console.log(el2); // 👉️ div.box

第一个示例查找属性设置为的div元素。data-idfirst

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

第二个示例查找具有data-id属性集的 DOM 元素。

该属性可以设置为满足条件的任何值。

如果需要选择元素集合而不是第一个匹配元素，请使用querySelectorAll方法而不是. querySelector

通过属性的部分匹配获取 DOM 元素

要通过部分匹配属性值来获取 DOM 元素，请使用
querySelector带有选择器的方法，该选择器匹配值以特定字符串开头、结尾或包含特定字符串的属性。

索引.js


// ✅ Get element where `data-id` STARTS with "fir"
const el1 = document.querySelector('[data-id^="fir"]');

// ✅ Get element where `data-id` ENDS with "st"
const el2 = document.querySelector('[data-id$="st"');

// ✅ Get element where `data-id` CONTAINS "first"
const el3 = document.querySelector('[data-id*="first"');

如果您需要匹配元素的集合而不仅仅是第一个元素，请使用querySelectorAll方法而不是. querySelector

第一个示例选择一个 DOM 元素，其中data-id
属性的值以开头fir。

索引.js


const el1 = document.querySelector('[data-id^="fir"]');

You might be familiar with the caret ^ symbol, which has the same meaning when used in regular expressions.

The second example selects a DOM element where the value of the data-id
attribute ends with st.

index.js


const el2 = document.querySelector('[data-id$="st"');

The third example selects a DOM element where the value of the data-id
attribute contains first.

index.js


const el3 = document.querySelector('[data-id*="first"');

The string first could be located anywhere in the data-id attribute, as long
as it is contained, the condition would be met.

You could also prefix the selector with a specific type of element you want to
match to narrow down the results.

index.js


// ✅ Get `div` where `data-id` STARTS with "fir"
const el1 = document.querySelector('div[data-id^="fir"]');

The example selects a div element where the value of the data-id attribute
starts with fir.

–