为什么JS代码"var a = document.querySelector('a [data-a = 1]');" 导致错误？

Question

我在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 API document.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 API document.querySelector通过其自定义数据属性来查找此锚元素.但事实是我得到了错误.

HTML5对HTML5 JS API的规范是否document.querySelector说该方法无法查找具有数值的HTML5数据自定义属性？(需要HTML5规范源.)

Answer 1

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

标识符不能以数字开头.必须引用字符串.

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

使用"1"(这是一个字符串)代替.

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

如果您的号码存储在变量中,例如var dataId = 5; 那么应该用这种方式写出document.querySelector("a [data-a ='"+ dataId +"']"); 这个答案有所帮助,但我对报价有点麻烦,希望这有助于某人 (3认同)

Answer 2

你可以用

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

代替

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