In JavaScript, il ' querySelectorAll() ” recupera il primo elemento che corrisponde esattamente ai selettori CSS specificati. Questo metodo avvia l'attraversamento dell'albero DOM per eseguire questa attività. Una volta trovato l'elemento, applica le proprietà o i metodi incorporati di JavaScript definiti nella sezione dello script per eseguire attività speciali. Questo metodo viene solitamente utilizzato per selezionare gli elementi mirati secondo i requisiti. Consente agli utenti di selezionare tutti gli elementi che corrispondono al selettore specificato oa quello particolare posizionato all'indice dato.
Questa guida illustra l'uso del metodo 'querySelectorAll()' in JavaScript.
Come utilizzare il metodo 'querySelectorAll ()' in JavaScript?
Per utilizzare il ' querySelectorAll() ” , specifica il selettore CSS come suo argomento. I selettori CSS includono 'Tipo, Classe e id'. Se il selettore CSS non è valido, restituisce un errore di sintassi, altrimenti restituisce un oggetto NodeList statico come output standard.
Sintassi
document.querySelectorAll ( Selettori CSS )
Nella sintassi precedente, il ' Selettori CSS ” si riferiscono a tutti i selettori CSS validi.
Usiamo praticamente la sintassi sopra definita.
Codice HTML
Panoramica del codice HTML fornito:
< h2 classe = 'demo' > Prima rubrica h2 >< h3 classe = 'demo' > Seconda rubrica h3 >
< P classe = 'demo' > Primo paragrafo P >
< P classe = 'demo' > Secondo paragrafo P >
< pulsante al clic = 'funzionejs()' > Clicca qui ! pulsante >
Nelle righe di codice precedenti:
- IL ' Il tag ” aggiunge un sottotitolo con la classe “demo”.
- IL ' Il tag ” definisce un secondo sottotitolo con la stessa classe denominata “demo”.
- IL ' I tag incorporano le istruzioni del paragrafo che hanno la stessa classe, ad esempio 'demo'.
- IL '
” include un nuovo pulsante con un evento del mouse “onclick” per eseguire la funzione “jsFunc()”.
Nota: Il particolare codice HTML è seguito in tutta questa guida.
Esempio 1: applicazione del metodo 'querySelectorAll()' per selezionare elementi con la stessa classe e modificarne i colori
Questo esempio utilizza il metodo 'querySelectorAll()' per selezionare tutti gli elementi che utilizzano la classe 'demo'.
codice javascript
Diamo una panoramica del codice indicato di seguito:
< copione >funzione jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
per ( permettere io = 0 ; io < lista.lunghezza; io++ ) {
elenco [ io ] .style.color = 'rosso-arancio' ;
}
}
copione >
Nelle righe di codice sopra:
- IL ' jsFunc() ” la funzione è definita.
- Nella sua definizione, la variabile 'lista' utilizza il ' querySelectorAll() ” per selezionare tutti gli elementi aventi la classe “demo”.
- Successivamente, il “ per ” il ciclo inizializza un elenco di nodi per iterare lungo tutti gli elementi HTML trovati che hanno la classe “ dimostrazione ” e cambia il colore del testo usando il “ stile.colore ' proprietà.
Produzione
Nell'output sopra, si può vedere che il colore del testo degli elementi che comprendono lo stesso nome di classe, ad esempio 'demo', viene modificato al clic del pulsante.
Esempio 2: applicazione del metodo 'querySelectorAll()' per selezionare gli elementi indicizzati specifici
Oltre a tutti gli elementi, l'utente può anche selezionare l'elemento indicizzato specifico con la classe 'demo'.
codice javascript
Considera il codice JavaScript fornito:
< copione >funzione jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
elenco [ 0 ] .style.color = 'verde' ;
}
copione >
Nello snippet di codice sopra:
- La variabile 'list' seleziona l'elemento 'h2' la cui classe è 'demo' con l'aiuto del ' querySelectorAll() ' metodo.
- Successivamente, la variabile 'list' specifica l'indice dell'elemento 'h2' per modificare il colore del testo dell'elemento 'H2' posizionato all'indice '0'.
Produzione
L'output mostra che il colore del testo dell'elemento 'H2' posizionato all'indice zero ha la classe 'demo' modificata al clic del pulsante.
Esempio 3: applicazione del metodo 'querySelectorAll()' per ottenere il numero di elementi con la stessa classe
Questo esempio recupera il numero di elementi che hanno la stessa classe utilizzando il metodo 'querySelectorAll()'.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML modificato di 'Esempio 1':
< P id = 'per' > P >
Nel codice HTML sopra indicato, aggiungi un paragrafo vuoto con un id 'para' alla fine del codice HTML 'Esempio 1'.
codice javascript
Ora, continua con il codice JavaScript:
< copione >funzione jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'per' ) .innerHTML = nodelist.length;
}
copione >
Secondo il frammento di codice sopra:
- La funzione 'jsFunc ()' seleziona prima tutti gli elementi '
' utilizzando il ' querySelectorAll() ' metodo.
- Dopodiché il “ getElementById() ” accede al paragrafo vuoto aggiunto tramite il suo id “para” per accodarlo con il valore restituito della proprietà “length” applicata.
Produzione
Come visto, l'output sopra mostra un totale di '4' elementi che corrispondono al selettore di classe CSS specificato 'demo'.
Conclusione
IL ' querySelectorAll() ” può essere utilizzato facilmente specificando il selettore CSS come suo valore. Questo metodo abbina ogni elemento HTML e seleziona quelli che corrispondono al selettore specificato. Una volta selezionati gli elementi, esegue su di essi l'attività richiesta definita nella sezione dello script. Questa guida illustra brevemente l'uso del metodo 'querySelectorAll()' in JavaScript.