QuerySelector 一个元素中的多个数据属性

我试图找到一个具有 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 属性放在一个子元素中，比如:

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

那么，是否有一个选项来搜索 同时具有这两种属性? < br > 我已经尝试了几个选项，但我没有得到它。

89251 次浏览
小开
最佳答案

There should not be a space between the 2 selectors

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

if you give a space between them it will become a descendant selector, ie it will search for an element attribute data-period="current" which is inside an element with data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" like

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

space in selector looks for [data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .You don't need to put space in between attribute value selector:

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

This is how I came up with a solution for selecting a specific class by multiple dataset attributes.

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

What you thought was correct, however you just needed to specify the class you were trying to select.


提交答案