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放在像child这样的子元素中,它运行良好

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

如果你给他们之间的空间将成为一个后代选择,也就是说,它会为一个元素属性搜索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 in selector 查找[data-period="current"]in [data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"]。你不需要在属性值选择器之间放置空格：

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