使用 JavaScript 通过 Href 属性获取元素

Get an Element by Href Attribute using JavaScript

使用该querySelector()方法通过 href 属性获取元素，例如
document.querySelector('a[href="https://example.com"]'). 该方法返回与选择器匹配的第一个元素，或者null如果 DOM 中不存在具有提供的选择器的元素。

以下是本文示例的 HTML。

索引.html


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

  <body>
    <a href="https://example.com">Example</a>

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

这是相关的 JavaScript 代码。

索引.js


// ✅ Get first element by href attribute
const el1 = document.querySelector('[href="https://example.com"]');
console.log(el1); // 👉️ a

// ✅ Get ALL elements by href attribute
const elements1 = document.querySelectorAll('[href="https://example.com"]');
console.log(elements1); // 👉️ [a]

// ✅ Get element by Partially Matching Href attribute
const el2 = document.querySelector('[href*="example.com"]');
console.log(el2); // 👉️ a

// ✅ Get ALL elements by Partially Matching Href attribute
const elements2 = document.querySelectorAll('[href*="example.com"]');
console.log(elements2); // 👉️ [a]

第一个示例使用
document.querySelector
方法获取href属性值为的
第一个元素https://example.com。

索引.js


const el1 = document.querySelector('[href="https://example.com"]');

如果 DOM 中不存在具有提供的选择器的元素，则该
querySelector()方法返回null。

第二个示例使用
document.querySelectorAll
方法和完全相同的选择器来获取具有href指定值属性的元素的集合。

索引.js


const el2 = document.querySelector('[href*="example.com"]');

在第三个示例中，我们通过部分匹配其
href属性值来获取一个元素。

索引.js


const el2 = document.querySelector('[href*="example.com"]');

此选择器检查字符串example.com是否包含在元素的属性值中的任何位置。

如果您需要将范围缩小到特定元素，例如a标签，您可以使用标签名称启动选择器。

索引.js


const el1 = document.querySelector('a[href="https://example.com"]');
console.log(el1); // 👉️ a

上面的示例获取第一个具有值为的属性的a元素。hrefhttps://example.com

这不会匹配具有指定href值的任何其他元素。

–