JavaScript viene utilizzato per aggiungere interattività a una pagina HTML statica; Ma per aggiungere interattività deve accedere agli elementi HTML presenti nel DOM. JavaScript offre una serie di metodi per accedere agli elementi HTML presenti in DOM. Qui ne discuteremo la maggior parte di loro in dettaglio:

Come accedere a un elemento DOM dal suo ID usando JavaScript

Uno dei metodi più comuni per accedere a un elemento in DOM HTML getElementById () che accede a un elemento in base al valore del suo attributo ID. Il valore degli attributi ID dovrebbe essere univoco e non ci sono due elementi su una singola pagina HTML dovrebbero avere ID simili. Anche se ci sono più elementi che hanno lo stesso ID, il getElementById () Il metodo restituisce solo un elemento (il primo elemento con quell'ID nel file HTML).

Ora daremo un'occhiata a un esempio per capire meglio come il getElementById () Il metodo funziona.

Nota: La console del browser viene utilizzata per la dimostrazione di esempi in questo articolo.

Il seguente file HTML verrà utilizzato per questo esempio; Il JavaScript verrà aggiunto all'interno del Tag che sono specificamente utilizzati per incorporare il codice JavaScript direttamente all'interno di un file HTML.

Come ottenere elementi in javascript dal DOM?

Come accedere a un elemento DOM dal suo ID?

getElementById ()

Nel file HTML sopra indicato abbiamo un paragrafo con un ID univoco i.e. Esempio-id. Se vogliamo accedere a questo elemento di paragrafo, possiamo usare il getElementById () metodo:

Ora possiamo usare la variabile di paragrafo appena creata per manipolare il Esempio-id Elemento direttamente da JavaScript E.g Se vogliamo cambiare lo sfondo e il colore del testo del paragrafo: allora:

Come accedere agli elementi DOM in base alla loro classe

IL getElementsByClassName () Il metodo può essere utilizzato per ottenere più elementi che hanno lo stesso valore di attributo di classe. Per mostrare come il getElementsByClassName () Il metodo funziona modificheremo il nostro file HTML nel modo seguente:

Come ottenere elementi in javascript dal DOM?

Come accedere agli elementi DOM in base alla loro classe?

getElementsByClassName ()

IL getElementsByClassName () Il metodo restituisce tutti gli elementi che hanno una classe specifica sotto forma di un array. Quindi, se vogliamo modificare solo uno degli elementi presenti all'interno dell'array restituito, dovremo accedervi con il suo numero indice:

Possiamo usare un loop se vogliamo applicare le stesse modifiche a tutti gli elementi dell'array:

Come accedere agli elementi DOM con il loro tag

JavaScript fornisce anche il getElementsByTagName () Metodo che può essere utilizzato per accedere a tutti gli elementi che hanno lo stesso tag HTML:

Come ottenere elementi in javascript dal DOM?

• metodo getElementById ()


• Metodo getElementsByClassName ()


• Metodo getElementsByName ()


• Metodo getElementsByTagname ()


• Metodo QuerySelector ()


• Metodo QuerySelectorall ()

Possiamo nuovamente utilizzare un ciclo per applicare le stesse modifiche a tutti gli elementi presenti all'interno del nuovo array:

Come accedere agli elementi DOM utilizzando i metodi di selezione di query

JavaScript ha anche il QuerySelector () e il QuerySelectorAll () Metodi che possono essere utilizzati per accedere agli elementi DOM HTML. Per accedere a un singolo elemento possiamo usare il QuerySelector () metodo; Se ci sono più elementi con lo stesso ID o classe, il QuerySelector () Il metodo restituisce il primo elemento:

Come ottenere elementi in javascript dal DOM?

metodo getElementById ()

Metodo getElementsByClassName ()

Metodo getElementsByName ()

Metodo getElementsByTagname ()

Metodo QuerySelector ()

Metodo QuerySelectorall ()

IL # Il segno è il selettore per l'attributo ID mentre il . Il segno è il selettore per l'attributo di classe.

IL QuerySelectorAll () Il metodo restituisce un array contenente tutti gli elementi DOM con un nome di classe specifico o un ID:

Come ottenere elementi in javascript dal DOM?

metodo getElementById ()

Metodo getElementsByClassName ()

Metodo getElementsByName ()

Metodo getElementsByTagname ()

Metodo QuerySelector ()

Metodo QuerySelectorall ()

Possiamo eseguire metodi diversi come .per ciascuno() metodo sugli array restituiti da QuerySelectorAll (). Questi metodi non funzionano con gli array restituiti da geelement metodi.

Conclusione

L'accesso agli elementi DOM HTML e renderli interattivi tramite JavaScript è la parte più semplice ma essenziale del lavoro di Develoepr front-end. Qui abbiamo elencato i cinque metodi più comuni utilizzati in JavaScript per accedere agli elementi DOM.