document.querySelector wiele atrybuty danych w jednym elemencie

Question

Próbuję znaleźć elementu z document.querySelector który ma wiele danych atrybuty:

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

myślałem o czymś takim:

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

ale to nie działa. Jednak to działa dobrze, jeśli mogę umieścić drugą danych atrybutu w dziecięcą elementu jak

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

tak, to czy istnieje możliwość, aby szukać zarówno cechy naraz? Wypróbowałem kilka opcji, ale nie rozumiem.

Answer 1

Nie powinno być przestrzeń między 2 selektorów

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

jeśli dać przestrzeń między nimi stanie się descendant selector, czyli będzie szukać elementu atrybutu data-period="current" który jest wewnątrz elementu z data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" jak

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

Answer 2

przestrzeń selektora szuka [data-period="current"] w [data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .you nie trzeba umieścić w przestrzeni pomiędzy selektorem wartość atrybutu:

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