使用 JavaScript 通过 aria-label 获取元素

Get Element by aria-label using JavaScript

要通过 aria-label 获取元素，请将针对特定
aria-label值的选择器传递给querySelector()方法，例如
document.querySelector('[aria-label="Close"]'). 该querySelector方法返回文档中与提供的选择器匹配的第一个元素。

这是文章中示例的 HTML。

索引.html


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

  <body>
    <button aria-label="Close">X</button>

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

这是相关的 JavaScript 代码。

索引.js


// ✅ Get first element with aria-label = "Close"
const element = document.querySelector('[aria-label="Close"]');
console.log(element); // 👉️ button

// ✅ Get all elements with aria-label = "Close"
const elements = document.querySelectorAll('[aria-label="Close"]');
console.log(elements); // 👉️ [button]

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

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

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

第二个示例选择文档中
aria-label属性设置为的所有元素Close。

button您还可以通过仅选择或具有属性的元素或选择具有属性集的元素来缩小范围，而不管值。 divaria-label

索引.js


// ✅ select `button` with aria-label = "Close"
const el1 = document.querySelector('button[aria-label="Close"]');
console.log(el1); // 👉️ button

// ✅ select any element with aria-label attribute set
const el2 = document.querySelector('[aria-label]');
console.log(el2); // 👉️ button

第一个示例查找
属性设置为的button元素。aria-labelClose

具有属性集的任何div或p元素都不会满足条件。

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

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

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

通过 aria-label 值的部分匹配获取元素

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

索引.js


// ✅ Get element where aria-label STARTS with Clo
const el1 = document.querySelector('[aria-label^="Clo"]');

// ✅ Get element where aria-label ENDS with ose
const el2 = document.querySelector('[aria-label$="ose"]');

// ✅ Get element where aria-label CONTAINS Close
const el3 = document.querySelector('[aria-label*="Close"]');

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

第一个示例选择一个 DOM 元素，其中aria-label
属性的值以开头Clo。

索引.js


const el1 = document.querySelector('[aria-label^="Clo"]');

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

第二个示例选择一个 DOM 元素，其中aria-label
属性的值以结尾ose。

索引.js


const el2 = document.querySelector('[aria-label$="ose"]');

第三个示例选择一个 DOM 元素，其中aria-label
属性值包含Close。

索引.js


const el3 = document.querySelector('[aria-label*="Close"]');

该字符串Close可以位于aria-label属性中的任何位置，只要包含它，就满足条件。

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

索引.js


// ✅ Get `button` where aria-label STARTS with Clo
const el1 = document.querySelector('button[aria-label^="Clo"]');

该示例选择
属性值以开头的button元素。aria-labelClo

–