L’oggetto “document”

Quando si deve operare con Javascript su un elemento di una pagina HTML, la prima cosa da fare è o recuperare l’elemento (se già esiste) o crearlo. Ciò può essere fatto utilizzando l’oggetto document. Nella gerarchia del DOM (vedi link) l’oggetto document è l’oggetto “più importante” in quanto permette di raggiungere tutti gli altri elementi del DOM. Pertanto tra i metodi principali di questo oggetto ci sono quelli che permettono di:

Recuperare gli elementi della pagina.
Creare nuovi elementi.

Un elemento della pagina HTML può essere recuperato in vari modi, tramite:

l’attributo ‘id’
il nome del tag
il nome di una classe CSS
il selettore CSS
le collezione degli oggetti HTML

In particolare il recupero di un elemento tramite l’id è possibile farlo solo tramite l’oggetto document che è l’unico a mettere a disposizione il metodo getElementById(). Gli altri modi elencati, invece, sono disponibili anche a partire da un oggetto di un qualunque elemento HTML. Per approfondimenti su quali sono tutti gli attributi e i metodi dell’oggetto document si rimanda al seguente: link.

NOTA – In questo articolo vedremo solo il primo metodo di recupero di un elemento della pagina, le altre modalità invece verranno trattate in un altro articolo a cui si rimanda (link).

Recuperare un elemento tramite l’id

Il metodo più pratico per recuperare uno specifico elemento della pagina HTML è tramite il suo id:

var elemento = document.getElementById("id_elemento");

1	var elemento = document.getElementById("id_elemento");

Il metodo getElementById() dell’oggetto document permette di recuperare un elemento HTML della pagina a partire dal valore del suo attributo id, che il metodo richiede come parametro sotto forma di stringa. Il metodo restituisce un riferimento all’oggetto dell’elemento richiesto. Vediamo un semplice esempio.

<!DOCTYPE html>
<html>
<body>
    <p id="da_cambiare">Testo da cambiare</p>
    <script>
        var elemento = document.getElementById("da_cambiare");
        elemento.innerHTML = "Nuovo testo del paragrafo";
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p id="da_cambiare">Testo da cambiare</p>

var elemento = document.getElementById("da_cambiare");

elemento.innerHTML = "Nuovo testo del paragrafo";

</script>

</body>

</html>

Nell’esempio di sopra durante il caricamento della pagina, viene recuperato l’elemento <p> con id=”da_cambiare” e il suo contenuto viene modificato assegnando la stringa “Nuovo testo del paragrafo” all’attributo innerHTML dell’elemento recuperato.

NOTA – L’attributo innerHTML di un elemento HTML permette di recuperare e modificare il suo contenuto.

L’esempio precedente può essere riscritto anche in maniera più compatta, richiamando l’attributo innerHTML direttamente dopo il metodo getElementById() nel modo seguente:

<!DOCTYPE html>
<html>
<body>
    <p id="cambiare">Testo da rimpiazzare</p>
    <script>
        document.getElementById("saluto").innerHTML = "Nuovo contenuto del paragrafo";
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p id="cambiare">Testo da rimpiazzare</p>

document.getElementById("saluto").innerHTML = "Nuovo contenuto del paragrafo";

</script>

</body>

</html>

Creare un elemento

Per creare un nuovo elemento in una pagina HTML, l’oggetto document mette a disposizione due metodi: createElement() e createTextNode().

Il metodo createElement() permette di creare un elemento di un tag di qualunque tipo, passato al metodo sotto forma di stringa; esso restituisce un riferimento all’oggetto dell’elemento creato. Sintassi:

var nuovo_elemento = document.createElement("nome_tag");

1	var nuovo_elemento = document.createElement("nome_tag");

Il metodo createTextNode() serve per creare elementi di testo della pagina, che si ricorda sono dei nodi atipici del DOM perché non corrispondono ad alcun tag HTML e che hanno la particolarità di non poter includere altri elementi o altri attributi (foglie dell’albero). Sintassi:

var nuovo_testo = document.createTextNode("testo_da_inserire")

1	var nuovo_testo = document.createTextNode("testo_da_inserire")

Esso richiede come parametro la stringa del testo da inserire nel nuovo nodo e restituisce un riferimento al nodo di testo creato.

Esempio.

<!DOCTYPE html>
<html>
<body>
	<input type="text" id="testo">
	<p>Scrivi nella casella di testo la voce da aggiungere alla lista e clicca il bottone.</p>
	<button onclick="aggiungi()">Aggiungi voce</button>
	<ol id="lista">
	  <li>Pane</li>
	  <li>Acqua</li>
	</ol>	
	<script>
	function aggiungi() {
	    var ct = document.getElementById("testo"); //si procura il riferimento alla casella di testo
	    var txt = ct.value; //si procura la stringa da aggiungere alla lista
	    var nodotxt = document.createTextNode(txt); //crea il nodo testo contenente la stringa passata
	    var nodoli = document.createElement("li"); //crea il nodo del nuovo item
	    nodoli.appendChild(nodotxt); //aggiunge il testo al nodo del nuovo item
	    document.getElementById("lista").appendChild(nodoli); //aggiunge il nodo del nuovo item alla lista
	    ct.value = ""; //ripulisce la casella di testo
	    ct.focus(); //porta il cursore nella casella di testo
	}
	</script>
	</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p>Scrivi nella casella di testo la voce da aggiungere alla lista e clicca il bottone.</p>

<button onclick="aggiungi()">Aggiungi voce</button>

<li>Acqua</li>

</ol>

function aggiungi() {

var ct = document.getElementById("testo"); //si procura il riferimento alla casella di testo

var txt = ct.value; //si procura la stringa da aggiungere alla lista

var nodotxt = document.createTextNode(txt); //crea il nodo testo contenente la stringa passata

var nodoli = document.createElement("li"); //crea il nodo del nuovo item

nodoli.appendChild(nodotxt); //aggiunge il testo al nodo del nuovo item

document.getElementById("lista").appendChild(nodoli); //aggiunge il nodo del nuovo item alla lista

ct.value = ""; //ripulisce la casella di testo

ct.focus(); //porta il cursore nella casella di testo

}

</script>

</body>

</html>

Il codice precedente produce la seguente pagina, che dà la possibilità di aggiungere un nuovo item in coda alla lista, digitando il testo della nuova voce nella casella di testo e cliccando il bottone.

Il codice è commentato ed è autoesplicativo (la sintassi è quella tipica dei linguaggi OOP). Si fa notare solo che i nuovi nodi, dopo che vengono creati, affinché effettivamente diventino degli elementi della pagina, devono essere aggiunti al nodo dell’elemento di appartenenza richiamando il metodo appendChild(). Per approfondimenti su questo e sugli altri metodi degli elementi del DOM HTML si rimanda al seguente: link.

Per capire “il grado di parentela” tra i nodi della gerarchia del DOM, infine, può essere utile la seguente figura (fonte: html.it):

Articoli che ti potrebbero interessare