JavaScript getElementByID

Per accedere a DOM (Document Object Model è un elemento API di programmazione), è possibile applicare varie tecniche. Uno dei metodi più utili e popolari è quello di utilizzare il metodo JavaScript getElementById (). Tutti i browser supportano JavaScript getElementById () tra cui Firefox, Internet Explorer, Chrome e così via.

Questo articolo discuterà il metodo getElementById () in JavaScript.

Cos'è getElementById () in JavaScript?

Prendere un oggetto di un elemento HTML con l'aiuto del suo "id", Usa il "documento.getElementById ()" metodo.È la tecnica più veloce ed efficiente per accedere a un elemento DOM. È principalmente utilizzato per manipolare o ottenere informazioni da un elemento nel documento.

Nota: L'ID di un elemento dovrebbe essere univoco all'interno di un documento HTML. Se ci sono molti elementi con lo stesso ID nel documento HTML, il metodo fornisce il primo elemento che rileva. Eme null se non può individuare un elemento nel DOM con l'ID specificato.

Come usare getElementById () in JavaScript?

Seguire la sintassi seguente per l'utilizzo del metodo getElementById ():

documento.getElementById (ID);

Accetta un "id"Dell'elemento su cui è necessario eseguire alcune operazioni. Questo ID aggiunto dovrebbe essere univoco in un documento e sensibile al caso.

Esempio 1: modificare il colore del testo

In questo esempio, fare clic su un pulsante causerà il cambiamento del colore dell'intestazione. Per fare ciò, creeremo l'intestazione usando

Tag e imposta "Benvenuto"Come ID che aiuterà a ottenere questo elemento:

Benvenuti in Linuxhint

Quindi, crea un pulsante in cui è allegato l'evento OnClick () che invocherà la funzione definita dall'utente JavaScript chiamata "cambia colore()", Trigger quando si fa clic sul pulsante:

clicca qui

Nel file JavaScript, definisce una funzione denominata "cambia colore()"Ciò otterrà prima l'intestazione aggiunta usando il"getElementById ()"Metodo e quindi chiama l'attributo di stile per impostare il colore uguale a"magenta":

funzione changeColor ()
documento.getElementById ("Welcome").stile.color = "magenta";

Può essere visto dall'uscita quando si fa clic sul pulsante, il colore dell'intestazione aggiunta viene modificato:

Esempio 2: modifica il testo

Qui cambieremo l'intero testo dell'intestazione sul clic del pulsante. Innanzitutto, creeremo un titolo usando

Tag mediante impostazione dell'ID come "chngtxt":

Benvenuti nel Linuxhint

Quindi, allega un evento OnClick () con il pulsante che chiamerà "ChangeText ()"Funzione per modificare il testo aggiunto:

clicca qui

Definisci il "ChangeText ()"Funzione in modo tale da recuperare l'intestazione dell'intestazione usando il documento.metodo getElementById () e modificare il suo testo quando si fa clic sul pulsante:

funzione ChangeText ()
var demo = documento.getElementById ("chngtxt").InnerHTML = "Il miglior sito Web per le capacità di apprendimento";

Come puoi vedere nell'output, quando facciamo clic sul pulsante, il testo viene modificato:

Abbiamo coperto tutti i dettagli sul metodo getElementById () in JavaScript.

Conclusione

GetElementById () è il metodo JavaScript utilizzato per recuperare l'elemento DOM HTML. È la tecnica più efficiente per accedere a un elemento DOM. Cerca l'elemento con l'aiuto dell'ID assegnato. Se l'ID specificato non si trova nel DOM, restituirà null. Questo manuale ha discusso del metodo JavaScript getElementById () con esempi dettagliati.