使用 JavaScript 通过数据属性获取元素

使用该querySelector方法通过数据属性获取元素，例如
document.querySelector('[data-id="box1"]'). 该querySelector方法返回与提供的选择器匹配的第一个元素，或者null如果没有元素与文档中的选择器匹配。

以下是本文示例的 HTML。

索引.html


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

  <body>
    <div data-id="box1">Box 1</div>
    <span data-id="box2">Box 2</span>

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

这是相关的 JavaScript 代码。

索引.js


// ✅ Get first element with data-id = `box1`
const el1 = document.querySelector('[data-id="box1"]');
console.log(el1); // 👉️ div

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

// ✅ Get all elements with data-id = `box1`
const elements = document.querySelectorAll('[data-id="box1"]');
console.log(elements); // 👉️ [div]

如果您需要一个包含具有特定数据属性的所有元素的集合，请使用该querySelectorAll方法。该方法采用与相同的参数querySelector。

我们使用
document.querySelector
方法获取 DOM 中第一个data-id属性等于的元素box1。

如果您必须部分匹配数据属性，请向下滚动到下一个副标题。

第二个示例显示如何获取data-id
属性设置为任意值的第一个元素。

索引.js


const el2 = document.querySelector('[data-id]');

您还可以通过查找特定类型的元素来缩小范围，例如div将数据属性设置为特定值的元素。

索引.js


const el1 = document.querySelector('div[data-id="box1"]');
console.log(el1); // 👉️ div

此示例仅选择属性设置为
div的元素。data-idbox1

如果您需要一组元素，而不是第一个与选择器匹配的元素，只需替换querySelector为. querySelectorAll

通过部分匹配数据属性获取元素

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

索引.js


// ✅ get element where data-id starts with `bo`
const el1 = document.querySelector('[data-id^="bo"]');
console.log(el1); // 👉️ div

// ✅ get element where data-id ends with `ox1`
const el2 = document.querySelector('[data-id$="ox1"]');
console.log(el2); // 👉️ div

// ✅ get element where data-id contains `box`
const el3 = document.querySelector('[data-id*="box"]');
console.log(el3); // 👉️ div

上面的任何示例都可以替换为获取与选择器匹配的元素集合的方法。 querySelectorAll

第一个示例选择第一个具有data-id属性的 DOM 元素，其值以bo.

索引.js


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

您可能熟悉脱^字符号，它与正则表达式一起使用时具有相同的含义。

第二个示例选择第一个具有以data-id结尾的属性的 DOM 元素ox1。

索引.js


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

第三个示例选择第一个具有data-id包含的属性的 DOM 元素box。

索引.js


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

该字符串box可以位于要满足条件的属性值中的任何位置。 data-id

您还可以在选择器前面加上您想要匹配的特定类型的元素，以缩小结果范围。

索引.js


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

该示例选择了一个具有以开头div的属性的元素。data-idbo

–

使用 JavaScript 通过数据属性获取元素

目录

Get element by data attribute using JavaScript