GetElementById in Javascript
Il metodo GetElementById() mi permette di modificare le proprietà di un elemento/tag specifico del documento html.
getElementById(x);
Dove x è il nome dell'id (etichetta univoca) associata all'elemento che voglio modificare.
E' particolarmente utile per leggere e modificare gli elementi presenti nel DOM.
Cos'è il DOM? Il DOM (Document Object Model) è un contenitore degli oggetti presenti in una pagina Html. Viene creato dal browser quando riceve e interpreta il codice Html della pagina web. Si tratta di una struttura astratta in memoria in cui tutti gli oggetti della pagina sono inseriti tramite un'organizzazione ad albero logico. Ogni oggetto della pagina è caratterizzato da specifiche proprietà e valori. Una volta costruito il DOM, il browser lo registra nella variabile Document. Il linguaggio javascript accede alle informazioni contenute nel DOM tramite la variabile globale Document. E' una variabile creata dal browser, quindi non devo dichiarla anche in Javascript. Essendo una variabile globale posso accedervi da qualsiasi parte dello script.
Un esempio pratico
Esempio 1
Ho un semplice documento HTML composto da due paragrafi
<html>
<head>
</head>
<body>
<p id="prova">Test 1</p>
<p>Test 2</p>
<script>
var Obj1 = document.getElementById('prova');
</script>
</body>
<html>
Il metodo getElementByID() per leggere il tag con id='prova' e registrarlo nella variabile Obj1.
Nota. Il metodo getElementById() recupera solo il primo elemento che soddisfa la selezione. Pertanto, se ci sono altri elementi con lo stesso id nella pagina, questi sono ignorati.
Alla variabile Obj1 viene assegnato l'intero oggetto <p> e tutte le sue proprietà.
Quindi, per leggere soltanto il testo "Test 1" devo usare la proprietà TextContent oppure innerHTML dell'oggetto.
document.write(Obj1.textContent);
Esempio 2
Per modificare un elemento o tag specifico del documento html, devo prima assegnargli un nome univoco (id) usando l'XHTML che mi permette di distinguerlo dagli altri elementi della pagina.
<html>
<head>
</head>
<body>
<p id="prova">Test 1</p>
<p>Test 2</p>
</body>
<html>
Una volta assegnata l'etichetta id="prova", scrivo uno script in javascript per modificarne l'aspetto.
<html>
<head>
</head>
<body>
<p id="prova">Test 1</p>
<p>Test 2</p>
<script>
document.getElementById('prova').innerHTML='Hello World!';
</script>
</body>
<html>
Il metodo getElementById individua il tag a cui è associato il nome id="prova" nel DOM. In questo caso si tratta di un tag paragrafo <p>.
Nota. E' molto importante che lo script con il metodo getElementById() si trovi dopo il tag da modificare. Se si trovasse prima non lo troverebbe nel DOM.
Il metodo innerHTML inserisce un codice html nel tag <p id="prova">. In questo caso è il testo "Hello World!".
Quando il browser legge il documento html, scrive il paragrafo <p id="prova">Test 1</p> con il contenuto testuale iniziale "Test 1".
Test 1
Test 2
Poi il browser elabora lo script in javascript che modifica il contenuto testuale del tag <p id=prova> scrivendo "Hello World!".
Hello World!
Test 2
Pertanto il browser visualizza all'utente Hello World! anziché Test 1.
Nota. La modifica non riguarda tutti i tag <p> della pagina ma soltanto quello a cui ho associato l'id=prova.
E così via.
