Come trovare elementi HTML da parte dei selettori CSS
Questo articolo discuterà le procedure per trovare gli elementi HTML da parte dei selettori CSS. Inoltre, spiegheremo anche l'utilizzo dei metodi QuerySelector () e QuerySelectorall () per scoprire gli elementi dei selettori CSS, con l'aiuto di esempi. Quindi iniziamo!
Metodo QuerySelector () per trovare elementi da parte dei selettori CSS
L'interfaccia elemento ha un "QuerySelector ()"Metodo, che può essere utilizzato per la ricerca di elementi dai selettori CSS. Il metodo QuerySelector () restituirà un “nullo"Valore se non viene trovato alcun elemento corrispondente. Questo metodo utilizza il "Pre-ordine della profondità"Metodo di attraversamento per attraversare i nodi del documento.
Sintassi
elemento = documento.QuerySelector (selettori);Il metodo QuerySelector () prende "selettori"Come argomento che è una stringa DOM che comprende uno o più selettori CSS validi.
Come utilizzare il metodo QuerySelector () per trovare elementi da parte dei selettori CSS
Ora mostreremo la procedura per trovare i nostri elementi tramite i selettori CSS usando il metodo QuerySelector ().
Esempio 1: utilizzando il metodo QuerySelector () per trovare elementi dei selettori CSS
Nel primo esempio, il metodo QuerySelector () scoprirà il primo
elemento in con classe = "Tutorial"E imposta il suo colore di sfondo su"giallo":
!Doctype Html>Trovare elementi HTML mediante selettore CSS
Il metodo QuerySelector ()
Questo è Linuxhint.com = "tutorial"
La voce principale
Primo paragrafo.
Esegui il programma di cui sopra in qualsiasi editor di codice o sandbox di codifica online, tuttavia, utilizzeremo JSBin per questo scopo:
Come puoi vedere lo sfondo del primo ""L'elemento viene modificato in"giallo":
Esempio 2: utilizzando il metodo QuerySelector () per trovare elementi dei selettori CSS
Il programma di seguito dà cambierà l'elemento di testo con id = "campione":
Trovare elementi dei selettori CSS
Il metodo QuerySelector ()
Modificheremo l'elemento di testo con:
Questo è un elemento p con il.
L'esecuzione del codice di cui sopra ti mostrerà il seguente output:
Esempio 3: utilizzando il metodo QuerySelector () per trovare elementi dei selettori CSS
Nel terzo esempio, useremo il "QuerySelector ()"Metodo per trovare il primo
elemento con il genitore e quindi modificare il suo colore di sfondo in “giallo":
Primo elemento
Sono il primo elemento p e l'elemento div è il mio genitore
Secondo elemento
Sono il secondo elemento p e l'elemento div è il mio genitore.
Fai clic sul pulsante indicato seguente per modificare il colore di sfondo del primo elemento P
Clicca sul "Cambia colore"Pulsante per modificare il colore di sfondo del primo
elemento:
QuerySelectorAll () per trovare elementi dei selettori CSS
In HTML, il metodo QuerySelectorall () restituisce un oggetto nodelist statico che comprende una raccolta degli elementi figlio di un elemento abbinato ai selettori CSS specificati. I numeri dell'indice vengono utilizzati per scoprire i nodi, a partire da 0.
Sintassi
elemento.QuerySelectorAll (selettori)Il metodo QuerySelectorall () prende "selettori"Come argomento, che è una stringa DOM che comprende uno o più selettori CSS validi.
Esempio 1: utilizzando il metodo QuerySelectorall () per trovare elementi dei selettori CSS
Nel primo esempio, useremo il metodo QuerySelectorall () per trovare tutto
elementi nel documento. Dopo averlo fatto, imposterà il "colore di sfondo"Del primo
elemento a "rosa":
Intestazione principale con
Primo paragrafo con.
Secondo paragrafo con.
Cambiare il colore di sfondo del primo elemento p con
Nota: stiamo imparando come trovare elementi dai selettori CSS
Come puoi vedere, lo sfondo del primo
L'elemento viene modificato in "rosa":
Esempio 2: utilizzando il metodo QuerySelectorall () per trovare elementi dei selettori CSS
Ora scriveremo un programma JavaScript per scoprire il numero totale di elementi con "Tutorial"Classe utilizzando il"lunghezza"Proprietà dell'oggetto nodelist:
Il primo elemento div con
Secondo elemento div con
Un elemento p con
Fai clic sul pulsante seguente per scoprire come il numero di elementi con la classe "Tutorial"
Ora, l'output ti mostrerà un "Cliccami"Pulsante; Fai clic su di esso per controllare il numero di elementi con Class = "Tutorial":
Esempio 3: utilizzando il metodo QuerySelectorall () per trovare elementi dei selettori CSS
Nel seguente esempio, useremo il metodo QuerySelectorall () per trovare "H2","div", E "arco" elementi. Dopo aver trovato gli elementi specificati, cambieremo il loro colore di sfondo in "rosso":
L'elemento principale
Il secondo elemento H2
Un elemento div
Un elemento p.
A P Element con = "Color: Blue;"> Span elemento
Fai clic sul pulsante seguente per impostare il colore di sfondo di tutti gli elementi H2, Div e Span.