документ.querySelector несколько атрибутов данных в одном элементе

Я пытаюсь найти элемент с документом.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>

Итак, есть ли возможность искать оба атрибута сразу? Я пробовал несколько вариантов, но не понял.

12
dom element javascript jquery

2 ответов

не должно быть пространства между 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>
26

пробел в селекторе ищет [data-period="current"] на[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .Вам не нужно помещать пространство между селектором значений атрибутов:

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