为什么JS代码"var a=document.querySelector('a[data-a=1]&#

Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?

本文关键字：data-a querySelector var 代码 JS 为什么 document quot      更新时间：2023-09-26

我在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标识符或字符串。

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

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

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

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

您可以使用

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

而不是

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

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

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

假设我们有数据价格的divs

<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}"]`)

Yes字符串必须加引号，在某些情况下，如在appescription中，引号必须转义

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

我花了一段时间才找到，但如果你有一个存储在变量中的数字，比如x，并且你想选择它，请使用

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

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

变量（ES6）的示例：

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

相关文章：