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"]')

但它不起作用。但是，如果我将第二个data-attribute放在像

这样的子元素中，它的效果很好

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

那么，是否可以同时搜索这两个属性？我已经尝试了几种选择，但我不明白。

Answer 1

2个选择器之间不应有空格

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>

Answer 2

选择器中的

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

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