Question

我正在尝试使用以下方法搜索文档

document.querySelectorAll("a[href*=google.com]")[0].href;

要在文档中搜索包含google.com网址的href 奇怪的是，到目前为止，它一直对我有用会发生什么事？这是向我显示的错误：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'a[href=google.com]' is not a valid selector.
at <anonymous>:1:10

我再说一遍，我已经使用该代码多年了，今天它已经停止工作，请问任何解决方案吗？

这是我的HTML：

<html>
    <head>
        <title> MY WEB </title>
    </head>
    <body>
        <a rel="nofollow" href="//www.google.com/" target="_blank">GOOGLE</a>
    </body>
</html>

Answer 1

在google.com的值中添加引号

let result = document.querySelectorAll("a[href*='google.com']")[0].href;

let result = document.querySelectorAll("a[href*='google.com']")[0].href;
console.log(result)

<html>
<head>
<title> MY WEB </title>
</head>
<body>
<a rel="nofollow" href="//www.google.com/" target="_blank">GOOGLE</a>
</body>
</html>

Answer 2

尝试一下

document.querySelectorAll('a[href*="google.com"]')[0].href;

您需要将attribute value指定为string。

Answer 3

下面的演示提供了三种引用链接或一组链接的方法。演示中将对详细信息进行评论。

关于OP接受的答案：.querySelectorAll(...)[0]是正确的，但应注意，还有一个更合适的答案

document.querySelector()                  document.querySelectorAll()
/*
Will find only the first match            Will collect all matches into a NodeList
Returns that match                        Returns the NodeList

我们可以对哪一个更快进行猜测。在仅包含single link的简单测试中-qSA[0]比qS慢37％，在使用10 links的测试中慢60％

/* #1 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If we have ONLY ONE link with href='https://google.com'
OR want ONLY THE FIRST link with href='https://google.com'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.querySelector() OR .querySelectorAll()[0] 
*/
document.querySelector("a[href='https://google.com']").style.fontSize = '1.5rem';
document.querySelectorAll("a[href='https://google.com']")[0].style.backgroundColor = 'black';

/* #2
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If we want ALL OF THE LINKS with href='https://google.com'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Collect nodes into a NodeList with .querySelectorAll() 
Iterate through NodeList with `.forEach()`
*/
const gLinx = document.querySelectorAll("a[href='https://google.com']");
gLinx.forEach(node => node.style.color = 'tomato');

/* #3
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If we want to have A REFERENCE TO ALL LINKS and get all
links with href='https://google.com' right now
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Collect all <a>nchors into a HTML Collection using .links 
Iterate through collection of links with for...of loop
On each iteration
Compare current value to target selector with .matches()
*/
const allLinx = document.links;

for (let link of allLinx) {
  if (link.matches("a[href='https://google.com']")) {
    let txt = link.textContent;
    link.textContent = txt.toUpperCase();
  }
}

<nav>
  <ol>
    <li><a href='https://stackoverflow.com'>StackOverflow</a></li>
    <li><a href='https://google.com'>Google</a></li>
    <li><a href='https://google.com'>Google</a></li>
    <li><a href='https://stackoverflow.com'>StackOverflow</a></li>
    <li><a href='https://google.com'>Google</a></li>
    <li><a href='https://stackoverflow.com'>StackOverflow</a></li>
    <li><a href='https://stackoverflow.com'>StackOverflow</a></li>
    <li><a href='https://google.com'>Google</a></li>
  </ol>
</nav>

document.querySelectorAll问题； a [href =]'不是有效的选择器

3 个答案: