document.querySelector più data-attributi in un elemento

Question

Sto cercando di trovare un elemento con document.querySelector che dispone di più schede attributi:

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

ho pensato a qualcosa di simile:

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

ma non funziona. Tuttavia, funziona bene, se metto il secondo dati di attributo in un bambino-elemento come

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

Quindi, c'è un'opzione per la ricerca di entrambi gli attributi in una volta? Ho provato diverse opzioni ma non capisco.

Answer 1

Non ci dovrebbe essere uno spazio tra i 2 selettori

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

se si dà uno spazio tra di loro diventerà un descendant selector, vale a dire che cercherà un elemento di attributo data-period="current" che si trova all'interno di un elemento con data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" come

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

Answer 2

spazio nel selettore cerca [data-period="current"] in [data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .È non hanno bisogno di mettere spazio tra attributo selettore di valore:

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