JavaScript è utilizzato principalmente per aggiungere contenuti interattivi e dinamici alle pagine HTML statiche, ma per aggiungere tale contenuto di cui ha bisogno per accedere agli elementi HTML presenti nel modello DOM (Documento). JavaScript offre diversi metodi per accedere agli elementi HTML presenti nel documento. Qui discuteremo in dettaglio, qual è il QuerySelector () metodo e come usarlo:

Qual è il metodo QuerySelector () in JavaScript

Vuoi cercare e accedere a qualsiasi elemento all'interno del documento? IL QuerySelector () è il metodo perfetto che hai per la funzionalità proposta.

IL QuerySelector () è un metodo in JavaScript che svolge un ruolo importante nella ricerca di elementi. È un metodo dell'API DOM che ci consente di ottenere o recuperare un singolo elemento che corrisponde al parametro che viene passato.

IL QuerySelector () restituisce null se non vengono trovate corrispondenze; Tuttavia, se ci sono due corrispondenze nel documento, accederà solo alla prima occorrenza.

Ora discuteremo della sintassi del QuerySelector () metodo prima di passare agli esempi per comprendere meglio il QuerySelector () metodo.

Sintassi

elemento = documento.queryyselector (selettore (s));

IL QuerySelector () Il metodo prende solo un parametro che specifica uno o più selettori; Questi selettori vengono utilizzati per selezionare il primo elemento HTML in base al suo tipo, attributo o valore del suo attributo, ecc.

Qui useremo diversi selettori CSS per mostrare correttamente come il QuerySelector () Metodo in realtà funziona:

Il selettore universale

Il segno asterisco (*) è noto come selettore universale; Viene utilizzato per accedere a tutti gli elementi del documento:

Ciao!

Benvenuto in Linux Sint!

Il selettore di tipo/tag

Possiamo cercare qualsiasi elemento passando il valore del suo tag a QuerySelector () metodo.

Ad esempio, se vogliamo ottenere il "

" Tag dal dom HTML e cambia il suo colore in rosso, il codice andrà così:

Html

Ciao!

Benvenuto in Linux Sint!

JavaScript

Il selettore ID

IL # Il segno viene utilizzato per selezionare un elemento in base al suo ID; Gli ID dovrebbero essere univoci e non ci sono due elementi su una singola pagina HTML dovrebbero avere lo stesso ID:

Ad esempio, per modificare il colore di un elemento HTML il cui ID è "ID Esempio", il codice sembrerà così:

Html

Ciao!

Benvenuto in Linux Sint!

JavaScript

Il selettore di classe

Il punto "." Il segno è il selettore per l'attributo di classe che viene utilizzato per selezionare un elemento in base alla sua classe. Più elementi possono avere la stessa classe ma il QuerySelector () Il metodo restituirà solo il primo elemento:

Ad esempio, per modificare il colore di sfondo di un elemento HTML la cui classe è "Classe di esempio", il codice sembrerà così:

Html

Ciao!

Benvenuto in Linux Sint!

JavaScript

Selettori multipli

Possiamo dare una combinazione di più selettori il QuerySelector () Anche il metodo, questi selettori dovrebbero essere separati dalle virgole. Tuttavia, accederà solo a un singolo elemento a seconda di quale si verifica per primo nella sequenza del codice HTML:

Ad esempio, se menzioniamo due tag HTML nel metodo QuerySelector ():

Mentre i nostri tag HTML sono inseriti nella seguente sequenza

Ciao!

Benvenuto in Linux Sint!

Metodo JavaScript QuerySelector () - spiegato

IL QuerySelector () Il metodo restituirà solo la prima partita che è

etichetta:

Per accedere a più elementi in JavaScript, viene utilizzato il metodo QuerySelectorall ():

Metodo QuerySelectorall () in JavaScript

Supponiamo, vogliamo cambiare il colore di tutti i

tag la cui classe è "verde". HTML e JavaScript andranno così:

Html

Benvenuto in Linux Sint!

Benvenuto in Linux Sint!

Benvenuto in Linux Sint!

Benvenuto in Linux Sint!

Benvenuto in Linux Sint!

JavaScript

Conclusione

IL QuerySelector () Il metodo è un modo efficiente per accedere agli elementi HTML in DOM. JavaScript fornisce altri metodi per accedere anche agli elementi DOM ma QuerySelector () è il più versatile e offre la maggior parte delle opzioni quando si tratta di manipolazione DOM. Dall'introduzione agli esempi, questo post ha spiegato e chiarito quasi ogni aspetto in modo preciso e completo. Con l'aiuto di esempi, ha chiaramente descritto il concetto di QuerySelector () metodo.