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

Question

我正在尝试查找具有 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>

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

Answer 1

2 个选择器之间不应有 space

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

如果你在它们之间给出一个 space 它将变成一个 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>

Answer 2

选择器中的

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

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

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

document.querySelector multiple data-attributes in one element

javascript

jquery

dom

element