documento.querySelector più dati attributi di un elemento

Sto cercando di trovare un elemento con il documento.querySelector che ha più dati-attributi:

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

Ho pensato a qualcosa di simile a questo:

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

ma non funziona. Tuttavia, funziona bene, se ho messo il secondo attributo in un elemento come

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

Così, c’è un opzione di ricerca sia per gli attributi in una volta? Ho provato varie opzioni ma non riesco a capire.

InformationsquelleAutor wiesson | 2015-04-29

 

2 Replies
  1. 52

    Non ci dovrebbe essere 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 discendente di selezione, vale a dire la ricerca di un elemento di attributo data-period="current" che è 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>
    • Che non è corretto. “Così, una valida non quotate valore di attributo CSS è una qualsiasi stringa di testo che non è una stringa vuota, non è solo un trattino (-), si compone di caratteri di escape e/o caratteri corrispondenti /[-_\u00A0-\u10FFFF]/ interamente, e non iniziare con una cifra o due trattini o un segno meno seguito da una cifra.” mathiasbynens.essere/note/non quotate-attributi-valori#css
    • L’ho scritto, basato su Firefox osservazione, che ho ripetuto molte volte. Ma sembra che io sia incasinato qualcosa o sono incappato in un bug, perché il selettore funziona correttamente validate ora. Grazie per aver ricordato. (Per la cronaca: ho cancellato il mio fuorviante, inutile commentare).
  2. 4

    spazio nel selettore cerca [data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .Non c’è bisogno di mettere spazio tra il valore di attributo di selezione:

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

Lascia un commento