开发者问题收集

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

2019-06-27
10982
javascript html

我尝试使用以下命令搜索文档： 

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

要在文档中搜索包含 google.com URL 的 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>
3个回答

将引号 '' 添加到 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>
Hien Nguyen
2019-06-27

按此方法尝试 

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

您需要将 属性值 指定为 字符串 。

Nidhin Joseph
2019-06-27

以下演示介绍了 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

我们可以猜测哪一个更快。在仅包含 单个链接 的简单测试中 - qSA[0] 比 qS 慢 37％，而在包含 10 个链接 的测试中则慢 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>
zer00ne
2019-06-27