document.querySelector 一个元素中的多个数据属性

Posted 2023-02-16

【中文标题】document.querySelector 一个元素中的多个数据属性

【英文标题】：document.querySelector multiple data-attributes in one element

【发布时间】：2015-07-08 09:17:05

【问题描述】：

我正在尝试查找具有 多个数据属性的document.querySelector 元素：

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>

我想过这样的事情：

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')

但它不起作用。 但是，如果我将第二个数据属性放在子元素中，它的效果很好：

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>

那么，有没有一个选项可以同时搜索两个属性？我尝试了几个选项，但我不明白。

【参考方案1】：

两个选择器之间不能有空格

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')

如果您在它们之间留一个空格，它将成为descendant selector，即它将搜索元素属性data-period="current"，它位于具有data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" 之类的元素内

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
    <div data-period="current">-</div>
</div>

【讨论】：

@TamásMárton 这不正确。 “因此，CSS 中有效的不带引号的属性值是任何不是空字符串的文本字符串，不仅仅是连字符 (-)，由转义字符和/或匹配 /[-_\u00A0-\u10FFFF] 的字符组成/ 完全，并且不以一个数字或两个连字符或一个连字符后跟一个数字开头。” mathiasbynens.be/notes/unquoted-attribute-values#css

@yckart 我根据我重复多次的 Firefox 观察来编写它。但似乎我要么搞砸了一些东西，要么遇到了一个错误，因为选择器现在可以正常使用未引用的属性值。感谢您指出。 （记录在案：我删除了我的误导性、不必要的评论。）

【参考方案2】：

选择器中的空格在[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] 中查找[data-period="current"]。您不需要在属性值选择器之间放置空格：

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')