È possibile accedere ad elementi HTML utilizzando i metodi JavaScript. I metodi JavaScript accedono agli elementi HTML da DOM (struttura logica simile a un albero dei documenti Web). JavaScript fornisce il supporto di cinque metodi che utilizzano il nome, l'ID, il nome di classe, il tagname o il selettore CSS per accedere agli oggetti. Accedendo agli elementi HTML usando JavaScript, è possibile manipolare gli elementi HTML. Questo articolo fornisce una dimostrazione di possibili modi per accedere agli elementi HTML utilizzando i metodi JavaScript.

Come accedere agli elementi HTML usando i metodi JavaScript

I cinque metodi JavaScript aiutano ad accedere agli elementi HTML e questi metodi sono descritti di seguito.

Come accedere agli elementi HTML per ID

L'attributo ID identifica in modo univoco l'elemento HTML e il seguente metodo JavaScript aiuterebbe a ottenere gli elementi HTML per ID.

L'ID si riferisce all'elemento HTML e viene utilizzato da JavaScript per accedere a quell'elemento HTML. L'oggetto (in DOM) che corrisponde all'ID verrebbe restituito.

Esempio:

Il codice fornito di seguito esercita il file getElementById () Metodo di JavaScript.

Il codice di cui sopra accede all'elemento che ha Id = UN1 e quindi il valore di quell'elemento viene manipolato in "Hello World!".

Produzione

Dall'output, si osserva che il contenuto originale di

è stato cambiato in "Hello World!".

Come accedere agli elementi HTML per nome

L'attributo del nome degli elementi può anche essere utilizzato da JavaScript per accedere agli elementi HTML. Tuttavia, un singolo nome può essere associato a più elementi HTML. Il codice fornito utilizza il file getElementsByName () metodo.

Due paragrafi hanno gli stessi nomi; Pertanto, dobbiamo definire il numero dell'indice di ciascun paragrafo (al momento dell'utilizzo del metodo). Il numero dell'indice del primo paragrafo viene definito [0] e il secondo paragrafo come [1].

Produzione

Dall'output si osserva che il contenuto del paragrafo (in indice [1]) è stato modificato.

Come accedere agli elementi HTML di Tagname

Il metodo JavaScript getElementsByTagName () è usato qui per accedere agli elementi con i loro nomi di tag.

Il codice di cui sopra accede al paragrafo (all'indice [0]) e cambia il suo valore in "Il paragrafo è accessibile".

Nota: Un documento HTML comprende vari tag e se hai intenzione di accedervi utilizzando JavaScript getElementsByTagName () Metodo, devi menzionare il numero dell'indice dell'elemento.

Produzione

L'output mostra che il contenuto del paragrafo all'indice 0 è stato modificato.

Come accedere agli elementi HTML di ClassName

IL getElementsByClassName () Il metodo di JavaScript viene utilizzato qui per accedere agli elementi HTML.

Il codice sopra accede alla classe denominata "due"E cambia il suo contenuto. Un documento può contenere diverse classi con gli stessi nomi; Pertanto, anche un numero di indice è obbligatorio.

Produzione

L'output mostra che il contenuto del nome della classe (denominato due) è stato cambiato.

Come accedere agli elementi HTML per queryyselector

Un elemento HTML può avere classi e ID, che possono essere utilizzati per cambiare gli stili degli elementi. IL QuerySelector () Il metodo di JavaScript consente di ottenere gli elementi che corrispondono al selettore CSS specifico. IL QuerySelector è ulteriormente diviso in due metodi;

• IL QuerySelector () Il metodo restituisce il primo elemento (che corrisponde all'espressione)
• IL QuerySelectorAll () Il metodo restituisce tutti gli elementi corrispondenti

Nota: Per accedere alla lezione, devi mettere il punto (.) prima del nome della classe e per l'ID devi utilizzare il segno (#) prima del nome ID.

Esempio 1: usando il metodo QuerySelector ()

Il codice scritto di seguito utilizza il QuerySelector () metodo per ottenere il primo elemento che corrisponde alla condizione.

Nel codice sopra, il QuerySelector () il metodo viene applicato agli elementi con class = "lh".

Produzione

L'output mostra che è stato accessibile il primo paragrafo (che corrisponde al nome della classe e all'ID) e il suo contenuto viene aggiornato.

Esempio 2: usando il metodo QuerySelectorall ()

Come discusso in precedenza il QuerySelector () Il metodo accede solo alla prima partita. Puoi usare il QuerySelectorAll () metodo per accedere all'elemento di tua scelta come abbiamo fatto nel seguente esempio.

Il codice sopra eservato pratica il file QuerySelectorAll () Metodo per accedere agli elementi che hanno id = "un". Il numero dell'indice è obbligatorio da mettere e abbiamo usato [1] qui.

Produzione

Dall'output si conclude che i selettori CSS come classe e ID sono stati utilizzati da QuerySelectorAll () Metodo per accedere/modificare il contenuto del paragrafo all'indice 1.

Conclusione

JavaScript può accedere agli elementi HTML utilizzando il Nome, ID, ClassName, Tagname e QuerySelector degli elementi HTML. Questi metodi possono anche essere usati per manipolare il contenuto di un elemento HTML. Questo articolo dimostra i cinque metodi JavaScript che accedono agli elementi HTML con vari mezzi. IL Id, ClassName e Tagname I metodi tendono ad accedere direttamente agli elementi HTML. comunque, il QuerySelector ()/QuerySelectorAll () Il metodo utilizza i selettori CSS per accedere e modificare gli elementi HTML.