Javascript 为什么JS代码“var a = document.querySelector('a[data-a=1]');” 导致错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14809528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?
提问by weilou
I've an element in the DOM:
我在 DOM 中有一个元素：
<a href="#" data-a="1">Link</a>
<a href="#" data-a="1">Link</a>
I want to get this element via its HTML5 custom data attribute data-a. So I write JS codes:
我想通过它的 HTML5 自定义数据属性来获取这个元素data-a。所以我写了JS代码：
var a = document.querySelector('a[data-a=1]');
var a = document.querySelector('a[data-a=1]');
But this code doesn't work and I get an error in browser's console. (I tested Chrome and Firefox.)
但是这段代码不起作用，我在浏览器的控制台中收到错误消息。（我测试了 Chrome 和 Firefox。）
JS code var a = document.querySelector('a[data-a=a]');doesn't cause error. So I think the problem is that HTML5's JS API document.querySelectordoesn't support to look for the number value in HTML5 custom data attribute.
JS 代码var a = document.querySelector('a[data-a=a]');不会导致错误。所以我认为问题是 HTML5 的 JS APIdocument.querySelector不支持在 HTML5 自定义数据属性中查找数字值。
Is this a problem of browser implementation bug or a problem of HTML5's spec relevant to document.querySelector?
这是浏览器实现错误的问题还是与 HTML5 规范相关的问题document.querySelector？
Then I tested codes below on http://validator.w3.org/:
然后我在http://validator.w3.org/上测试了下面的代码：
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>
They're validated. Since these HTML5 codes are validated. We should can use HTML5's JS API document.querySelectorto look for this anchor element via its custom data attribute. But tha fact is that I get error.
他们是经过验证的。由于这些 HTML5 代码经过验证。我们应该可以使用 HTML5 的 JS APIdocument.querySelector通过它的自定义数据属性来查找这个锚元素。但事实是我出错了。
Does HTML5's spec to HTML5 JS API document.querySelectorsay that this method can not look for an HTML5 data custom attribute with a number value? (An HTML5 spec source is wanted.)
HTML5 对 HTML5 JS API 的规范是否document.querySelector说此方法无法查找具有数字值的 HTML5 数据自定义属性？（需要 HTML5 规范源。）
回答by Quentin
From the selectors specification:
从选择器规范：
Attribute values must be CSS identifiers or strings.
属性值必须是 CSS 标识符或字符串。
Identifiers cannot start with a number. Strings must be quoted.
标识符不能以数字开头。字符串必须加引号。
1is therefore neither a valid identifier nor a string.
1因此既不是有效标识符也不是字符串。
Use "1"(which is a string) instead.
改用"1"（这是一个字符串）。
var a = document.querySelector('a[data-a="1"]');
回答by Nikita
You could use
你可以用
var a = document.querySelector('a[data-a="1"]');
instead of
代替
var a = document.querySelector('a[data-a=1]');
回答by Oksana
An example with variable (ES6):
变量示例（ES6）：
const item = document.querySelector([data-itemid="${id}"]);
const item = document.querySelector( [data-itemid="${id}"]);
回答by Donat
Took me a while to find this out but if you a number stored in a variable, say x and you want to select it, use
我花了一段时间才发现这一点，但是如果您将数字存储在变量中，例如 x 并且您想选择它，请使用
document.querySelector('a[data-a= + CSS.escape(x) + ']').
This is due to some attribute naming specifications that I'm not yet very familiar with. Hope this will help someone.
这是由于一些我还不太熟悉的属性命名规范。希望这会帮助某人。
回答by vhanahrni
Yes strings must be quoted and in some cases like in applescript, quotes must be escaped
是的，必须引用字符串，并且在某些情况下，例如在 applescript 中，必须对引号进行转义
do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
