Come trovare e ottenere elementi HTML in JavaScript
Questo articolo discuterà le procedure di ricerca e ottenere elementi HTML in JavaScript. Inoltre, gli esempi relativi a getElementById (), getElementsByTagName (), getElementsByClassName () e queryySelectorall () saranno dimostrati in questo articolo. Quindi iniziamo!
Come trovare e ottenere elementi HTML di ID in JavaScript
La maggior parte degli sviluppatori JavaScript ha utilizzato il getElementById () Metodo per trovare e ottenere elementi HTML con ID univoci. Se hai superato un ID che non appartiene a nessun elemento HTML, il metodo getElementById () visualizzerà il valore null.
Sintassi del metodo getElementById ()
documento.getElementByID (elementID)Qui, il "Elementid"Rappresenta l'ID univoco dell'elemento HTML che si desidera trovare e ottenere nel tuo codice JavaScript.
Esempio: trova e ottieni elementi HTML di ID in JavaScript
Aggiungeremo elementi HTML come un'intestazione con il
tag e tre elementi di paragrafo con il
Tag nell'esempio seguente. Si noti che abbiamo anche aggiunto "IDS"Con gli elementi del paragrafo:
Questo è Linuxhint.com
Trova e ottieni elementi HTML di ID in JavaScript
Questo è un programma JavaScript che utilizza il metodo "getElementsbyId"
Nel prossimo passaggio, troveremo e otterremo l'elemento con l'ID "P1"Usando il"documento.getElementById ()" metodo. Dopo Ding SO, cambieremo il contenuto dell'elemento HTML recuperato:
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
L'esecuzione del programma JavaScript di cui sopra mostrerà il seguente output:
Come trovare e ottenere elementi HTML di Tagname in JavaScript
Puoi utilizzare il "getElementsByTagName ()"Metodo JavaScript per trovare e ottenere un elemento HTML specifico con il nome del tag.
Sintassi del metodo getElementsByTagname ()
documento.getElementsByTagName (TagName)Qui, il tagname rappresenta il nome del tag dell'elemento HTML che si desidera recuperare.
Esempio: trova e ottieni elementi HTML di Tagname in JavaScript
L'esempio seguente troverà e otterrà tutti gli elementi HTML con il nome del tag "P"Utilizzo del metodo getElementsByTagName (). Successivamente, visualizzerà il contenuto dell'HTML presente al primo indice della raccolta di oggetti:
Questo è Linuxhint.com
Trova e ottieni elementi HTML per nome tag in JavaScript
Questo è un programma JavaScript che utilizza il metodo "getElementsByTagName"
Come puoi vedere, il testo del primo paragrafo del nostro programma JavaScript viene visualizzato correttamente:
Come trovare e ottenere elementi HTML di ClassName in JavaScript
IL "getElementsByClassName ()"Il metodo viene utilizzato per trovare e ottenere elementi HTML con la stessa classe. Utilizzando il nome della classe, quando si tenta di ottenere un elemento HTML, l'interprete JavaScript restituirà tutti gli oggetti appartenenti alla stessa classe. Successivamente, puoi eseguire operazioni specifiche su quegli elementi HTML.
Sintassi del metodo getElementsByClassName ()
documento.getElementsByClassName (ClassName)Qui, il "nome della classe"Rappresenta il nome di classe degli elementi HTML che è necessario trovare e ottenere nel tuo programma.
Esempio: trova e ottieni elementi HTML di ClassName in JavaScript
Nell'esempio seguente, abbiamo aggiunto un'intestazione e alcuni elementi di paragrafo con il nome di classe "C1":
Questo è Linuxhint.com
Trova e ottieni elementi HTML per nome di classe in JavaScript
Testo in First ParagrpAh
Testo nel secondo paragrafo
Successivamente, cercheremo gli elementi HTML che hanno "C1"Come la loro classe utilizzando il metodo getElementsByClassName () e memorizzerà le raccolte degli oggetti in"UN":
Ecco l'output che abbiamo ottenuto dall'esecuzione del programma JavaScript di cui sopra:
Come trovare e ottenere elementi HTML mediante selettore CSS in JavaScript
In html, il QuerySelectorAll () Il metodo 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 trovare e ottenere i nodi, a partire da 0.
Sintassi del metodo QuerySelectorall ()
elemento.QuerySelectorAll (selettori)Il metodo QuerySelectorall () prende "selettori"Come argomento, una stringa DOM comprende uno o più selettori CSS validi.
Esempio: trova e ottieni elementi HTML mediante selettore CSS in JavaScript
Nel programma JavaScript di seguito, abbiamo utilizzato il metodo QuerySelectorall () per trovare e ottenere gli elementi HTML di paragrafo con "C1"Come nome della loro classe:
Questo è Linuxhint.com
Trova e ottieni elementi HTML per nome di classe in JavaScript
Testo in First ParagrpAh
Testo nel secondo paragrafo
Dai un'occhiata all'output del metodo JavaScript QuerySelectorall ():
Conclusione
getElementById (), getElementsByTagName (), getElementsByClassName () e QuerySelectorall () sono i metodi JavaScript più comuni che vengono utilizzati per trovare e ottenere elementi in un programma JavaScript. È possibile utilizzare qualsiasi metodo menzionato per cercare un elemento HTML specifico nel codice. Questo articolo ha discusso delle procedure di ricerca e ottenere elementi HTML in JavaScript. Inoltre, gli esempi relativi a getElementById (), getElementsByTagName (), getElementsByClassName () e queryySelectorall () sono anche dimostrati in questo articolo.