javascript - 为什么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 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 规范源。）

score 175 · Accepted Answer

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

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

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

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

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

score 7 · Accepted Answer

你可以使用

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

代替

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

score 1 · Accepted Answer

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

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

假设我们有带有 data-price 的 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}"]`)

score -3 · Accepted Answer

是的，必须引用字符串，并且在某些情况下，例如在 applescript 中，必须对引号进行转义

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

score -3 · Accepted Answer

花了我一段时间才发现这一点，但是如果您将数字存储在变量中，例如 x 并且您想选择它，请使用

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

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

score -4 · Accepted Answer

-4

带有变量（ES6）的示例：

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

于 2020-02-24T16:59:52.320 回答

6 回答 6