为什么JS代码“ var a = document.querySelector（'a [data-a = 1]'）;”？导致错误？

74

我在DOM中有一个元素：

<a href="#" data-a="1">Link</a>

我想通过其HTML5自定义数据属性获取此元素data-a。所以我写了JS代码：

var a = document.querySelector('a[data-a=1]');

但是此代码不起作用，并且在浏览器的控制台中出现错误。（我测试了Chrome和Firefox。）

JS代码var a = document.querySelector('a[data-a=a]');不会导致错误。因此，我认为问题在于HTML5的JS APIdocument.querySelector不支持在HTML5自定义数据属性中查找数字值。

这是浏览器实现错误还是HTML5规范相关document.querySelector？

然后，我在http://validator.w3.org/上测试了以下代码：

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>

他们已通过验证。由于这些HTML5代码已经过验证。我们应该可以使用HTML5的JS APIdocument.querySelector通过其自定义数据属性来查找此锚元素。但是事实是我出错了。

HTML5对HTML5 JS API的规范是否document.querySelector表示该方法无法查找带有数字值的HTML5数据自定义属性？（需要HTML5规范源。）

— 微楼
source

6

使用CSS属性选择器时，值应该用引号引起来，例如a[data-a="1"]。

— 伊莱兰·马尔卡

2

querySelectorAll()不是“ HTML5 JS API”。它与HTML5完全无关。

— BoltClock

149

根据选择器规范：

属性值必须是CSS标识符或字符串。

标识符不能以数字开头。字符串必须用引号引起来。

1 因此既不是有效的标识符也不是字符串。

使用"1"（这是一个字符串）代替。

var a = document.querySelector('a[data-a="1"]');

— 昆汀
source

4

并且如果您的号码存储在变量中，例如var dataId = 5; 那么就应该这样写出来document.querySelector（“ a [data-a ='” + dataId +“']”）; 这个答案有所帮助，但我对引号感到有点麻烦，希望这对某人有帮助

— James Daly 2014年

注意，这也可以写成document.querySelector("a[data-a=\"1\"]");。

— Marc.2377 '19

7

你可以用

var a = document.querySelector('a[data-a="1"]');

代替

var a = document.querySelector('a[data-a=1]');

— 尼基塔
source

— 到目前为止，

0

因为您需要在要寻找的值周围加上括号。所以在这里：document.querySelector('a[data-a="1"]')

如果您事先不知道该值，但正在通过变量查找它，则可以使用模板文字：

假设我们的div具有数据价格

<div data-price="99">My okay price</div>
<div data-price="100">My too expensive price</div>

我们想找到一个元素，但是要找到某人选择的数字（所以我们不知道）：

// User chose 99    
let chosenNumber = 99
document.querySelector(`[data-price="${chosenNumber}"`]

— Earth_Believer
source

-2

花了我一段时间才能找到答案，但是如果您将一个数字存储在变量中，例如说x并且想要选择它，请使用

document.querySelector('a[data-a= + CSS.escape(x) + ']').

这是由于我还不太熟悉的一些属性命名规范。希望这会帮助某人。

— 多纳特
source

-2

带有变量（ES6）的示例：

const item = document.querySelector（[data-itemid="${id}"]）;

— Oksana
source

-3

是的，必须在字符串中加上引号，并且在某些情况下，例如在applescript中，必须将引号转义

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"

— 梵纳尼
source