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

<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规范源而被通缉。）

2013-02-11 weilou

当使用[CSS属性选择器]（http：//www.blo oberry.com/indexdot/css/syntax/selectors/attribute.htm），该值应该用引号括起来，例如， '一个[数据-A = “1”]'。 – 2013-02-11 09:53:44

'querySelectorAll（）'不是“HTML5 JS API”。它绝对与HTML5毫无关系。 – BoltClock 2013-07-20 12:24:59

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

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

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

改为使用"1"（这是一个字符串）。

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

2013-02-11 09:52:32 Quentin

，如果你的号码存储在变量例如var dataId = 5; 那么应该这样写出文件。querySelector（ “A [数据 - = ' ”+ DATAID +“']”）; 这个答案有帮助，但我有一些希望，这有助于某人的报价有问题 – 2014-07-28 22:45:13

你可以使用

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

，而不是

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

2013-02-11 09:56:07 Nikita

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

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

2017-12-11 14:36:32 vhanahrni

回答