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

【问题标题】：Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?为什么JS代码“var a = document.querySelector('a[data-a=1]');”导致错误？
【发布时间】：2013-01-26 09:36:41
【问题描述】：

我在 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 自定义数据属性中查找数值。

这是浏览器实现错误的问题还是与document.querySelector相关的HTML5规范问题？

然后我在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 规范源。）

【问题讨论】：

当使用CSS attribute selectors时，值应该用引号括起来，例如a[data-a="1"].
querySelectorAll() 不是“HTML5 JS API”。它与 HTML5 完全无关。

标签： javascript html css-selectors custom-data-attribute selectors-api

【解决方案1】：

来自the selectors specification：

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

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

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

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

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

【讨论】：

如果您的号码存储在变量中，例如 var dataId = 5;那么应该这样写出 document.querySelector("a[data-a='"+dataId+"']");这个答案有帮助，但我对引号有点麻烦，希望这对某人有所帮助
注意，这里也可以写成document.querySelector("a[data-a=\"1\"]");。
在这里使用变量的简洁方法是document.querySelector(a[data-a="${myVariable}"]);（所以可能会搞砸格式，但我使用了backticks而不是“”）

【解决方案2】：

你可以使用

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

而不是

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

【讨论】：

从今天起在 Firefox 中没有引号就无法工作
就是这样。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我花了一些时间才知道这一点，但如果你是一个存储在变量中的数字，比如 x 并且你想选择它，请使用

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

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

【讨论】：

【解决方案5】：

一个带变量的例子（ES6）：

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

【讨论】：

【解决方案6】：

因为您需要在要查找的值周围加上括号。所以在这里：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}"]`)

【讨论】：