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"]');

Answer 2

您可以使用

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

而不是

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

Answer 3

因为您需要用括号括起来的值。所以在这里：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}"`]

Answer 4

花点时间找我，但是如果您将数字存储在变量中（例如x）并且要选择它，请使用

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

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

Answer 5

带有变量（ES6）的示例：

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

Answer 6

必须引用字符串，在某些情况下，例如在applescript中，引号必须转义

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