Metodi per accedere/ottenere elementi nel DOM | spiegato con esempi

JavaScript è il linguaggio di scripting più comunemente usato per cambiare gli elementi di una pagina web, a dire il vero, nessun linguaggio di scripting può interagire direttamente con gli elementi HTML. Il linguaggio di scripting interagisce con il Dom (Document Object Model) e DOM interagisce con gli elementi HTML perché DOM è un'interfaccia dell'applicazione neutrale a livello di linguaggio (API).

In questo post, apprenderemo diversi metodi che possiamo usare in JavaScript che ci aiuteranno a modificare gli elementi HTML usando l'interfaccia DOM.

Access \ Ottieni metodi

JavaScript ci fornisce 5 diversi metodi attraverso i quali possiamo interagire con DOM per accedere a un elemento sulla pagina Web. Questi metodi sono in particolare:

• getElementById (ID)
• getElementsByClassName (ClassName)
• getElementsByTagName (TagName)
• QuerySelector (CSS_Selector)
• QuerySelectorAll (CSS_Selector)

Utilizzo di Access \ Get Methods

Per dimostrare l'uso di questi metodi GET \ Access dobbiamo prima impostare un file HTML e collegare un file JavaScript utilizzando la riga seguente:

Ora, dobbiamo impostare elementi all'interno del nostro file HTML, possiamo farlo usando le seguenti righe:

Ho l'id "demoid"


Ho il "test" di classe
Ho anche il "test" di classe


Ho il tag "articolo"
Ho anche l'articolo del tag "


Ho la query come "QuerySelect"


Ho la domanda come "QuerySelectall"

Ho anche la query come "QuerySelectall"

Come puoi vedere, ne abbiamo alcuni con id, alcuni con classi E abbiamo usato un tag anche. L'esecuzione di questo file HTML ci darà il seguente output:

Accesso a un elemento utilizzando il suo ID

Il primo metodo che testeremo è il getElementById (), accederemo all'elemento con l'ID "Demoide" E cambieremo il suo stile usando le seguenti righe di codice nel nostro file JavaScript:

var demoid = documento.getElementById ("Demoid");
Demoide.stile.backgroundColor = "Yellow";

Dopo aver eseguito il file otteniamo il seguente output sul nostro browser:

Come puoi vedere, siamo stati in grado di accedere all'elemento usando il suo ID e quindi modificare lo stile dell'elemento usando JavaScript.

Accesso agli elementi usando il nome della classe

Il metodo getElementByClassName () restituisce più elementi con lo stesso nome di classe. Possiamo accedere agli elementi usando il loro nome di classe con la seguente riga di codice:

var testclass = documento.getElementsByClassName ("Test");

Dal momento che abbiamo 2 elementi con il nome di classe "test" ecco perché la nostra variabile "Testclass" è dell'array di tipo e se vogliamo modificare gli attributi degli elementi all'interno dell'array dobbiamo fare riferimento a loro usando i loro indici di array come

TestClass [0].stile.bordo = "2px Green solido";
Testclass [1].stile.bordo = "2px marrone solido";

Al momento dell'esecuzione otteniamo il seguente output:

Accesso agli elementi utilizzando il nome del tag

Per selezionare elementi utilizzando il nome del tag utilizziamo il metodo getElementByTagName (), Nel nostro esempio, per selezionare gli elementi con il nome del tag "articolo" Usiamo la seguente riga:

var tagselect = documento.getElementsByTagName ("Articolo");

Ancora una volta, abbiamo due elementi con lo stesso nome di tag "articolo" Pertanto cambieremo manualmente i loro attributi usando i loro indici di array:

TagSelect [0].InnerHtml = 'Ho cambiato il mio testo';
tagselect [1].InnerHtml = 'Ho anche cambiato il mio testo';

Se eseguiamo il file ora, otteniamo il seguente output sul nostro browser:

Come puoi vedere, abbiamo cambiato il testo degli elementi con il Nome tag "Articolo".

Accesso a un elemento utilizzando le query Selector

Possiamo selezionare elementi utilizzando un selettore di query, per fare che utilizziamo il metodo documento.QuerySelector (), E se vogliamo selezionare un elemento con uno specifico id, noi usiamo il Simbolo "#" nel selettore di query come

var queRySelect = documento.QuerySelector ("#QuerySelect");

Dopo aver acceduto all'elemento possiamo cambiare il bordo con la riga seguente:

QuerySelect.stile.bordo = "1px rosso solido";

Otterrai il seguente risultato sul tuo browser:

Accesso a un elemento utilizzando tutti i selettori di query

Possiamo selezionare tutti gli elementi con la stessa query utilizzando il metodo QuerySelectorall (). Aggiungi la seguente riga nel file JavaScript:

const demoqueryall = documento.QuerySelectorall (".QuerySelectall ");

Per modificare gli attributi di entrambi gli elementi accessibili da questa querySelectorall (), utilizzare le seguenti righe di codice:

Demoqueryall.foreach ((query) =>
Domanda.stile.bordo = "1px Green solido";
);

Otterrai i seguenti risultati sul tuo browser:

Questo è tutto per l'accesso agli elementi utilizzando tutti i metodi offerti da JavaScript.

Conclusione

Esistono 5 metodi principali forniti da JavaScript che ci aiutano ad accedere \ Ottieni elementi di una pagina Web HTML con l'aiuto dell'interfaccia DOM. In questo post, abbiamo appreso tutti e 5 i metodi, implementato tutti questi metodi modificando gli attributi degli elementi a cui abbiamo avuto accesso. Abbiamo bisogno dell'interfaccia DOM per eseguire tutte queste alterazioni perché nessun linguaggio di scripting può accedere direttamente agli elementi HTML piuttosto che il DOM funziona come API per il linguaggio di scripting.