为啥JS代码“var a = document.querySelector('a[data-a=1]');”导致错误?
Posted
技术标签:
【中文标题】为啥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 完全无关。
【参考方案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"]`)
【讨论】:
以上是关于为啥JS代码“var a = document.querySelector('a[data-a=1]');”导致错误?的主要内容,如果未能解决你的问题,请参考以下文章
为啥建议不要在 Node.js 代码的任何地方关闭 MongoDB 连接?