为什么JS代码“VAR一个= document.querySelector（ '一个[数据-

我已经在DOM元素：

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

我想通过它的HTML5自定义数据来获得这个元素属性data-a 。所以我写的JS代码：

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

但是这个代码不工作，我得到了浏览器的控制台错误。（我测试铬和Firefox。）

JS代码var a = document.querySelector('a[data-a=a]'); 不会导致错误。所以我觉得问题是，HTML5的JS API document.querySelector不支持以寻找HTML5自定义数据属性的数值。

这是浏览器实现的bug问题或有关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 a = document.querySelector('a[data-a="1"]');

代替

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

我花了一段时间才能找到这个，但如果你存储在一个变量的数字，说x和要选择它，使用

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

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

是的字符串必须用引号引起来，并在某些情况下，像在AppleScript的，报价必须进行转义

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

文章来源: Why does JS code “var a = document.querySelector('a[data-a=1]');” cause error?