Capire il DOM significa entrare in possesso di una conoscenza fondamentale per scrivere codice JavaScript in grado di agire sulla struttura della pagina. Tale conoscenza è altrettanto indispensabile per poter utilizzare con successo librerie JavaScript come jQuery o YUI. In questo articolo vedremo alcuni aspetti fondamentali del DOM.
Struttura ad albero
Partiamo da questo semplice documento HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="test">Test</p>
</body>
</html>
E questa è la sua rappresentazione ad albero:
html
head
title
Test
body
p #test
Test
Ciascuna sezione dell'albero è detta nodo. Quindi abbiamo nodi elemento (come head), nodi testuali (come la stringa Test) e nodi attributo (come l'ID test).
Il nodo principale da cui si dirama tutto il documento è detto nodo radice. Nel caso dei documenti HTML il nodo radice è sempre l'elemento html.
Un nodo può avere dei nodi discendenti, che vengono detti nodi figli. Rispetto ai suo figli, il nodo viene detto nodo genitore.
Quindi p#test è figlio di body, il quale a sua volta è figlio di html. Quindi possiamo anche dire che html è l'antenato di p#test.
Allo stesso modo la stringa Test, essendo un nodo di testo, è figlia di p#test, come pure lo è l'ID test, in quanto figlio del paragrafo stesso.
Accedere al DOM
Il DOM è un'interfaccia, implementabile in vari linguaggi di programmazione (PHP, C++, Java, ecc.). JavaScript ha una sua implementazione del DOM ma, si badi bene, JavaScript e DOM non sono la stessa cosa.
Ciascun nodo del documento ha metodi e proprietà. Il documento stesso è un oggetto chiamato document e a loro volta i nodi in esso contenuti sono altrettanti oggetti (da cui l'acronimo DOM, ossia Document Object Model, Modello ad oggetti del documento).
Per esempio, per reperire un elemento conoscendo il suo ID possiamo usare il metodo getElementById() dell'oggetto document:
var test = document.getElementById('test');
La nostra variabile ora contiene un riferimento al nostro paragrafo. Attenzione però: qualora il riferimento non esistesse nel documento, otterremmo un errore. Infatti i metodi e le proprietà del DOM possiedono quasi tutti un sistema di eccezioni che generano errori JavaScript. Nel caso di un elemento inesistente si ottiene il valore null:
var test = document.getElementById('foo'); // null
Oltre ai metodi ci sono anche le proprietà. Ad esempio possiamo accedere al testo del paragrafo utilizzando le proprietà firstChild e nodeValue concatenate:
var test = document.getElementById('test');
alert(test.firstChild.nodeValue); // 'Test'
Usando le librerie JavaScript l'accesso al DOM è enormemente semplificato. In jQuery potremmo scrivere semplicemente:
alert($('#test').text()); // 'Test'
In effetti accedere al DOM in modo tradizionale è spesso lungo e laborioso. Ad esempio se volessimo aggiungere un elemento figlio al nostro paragrafo dovremmo scrivere:
var test = document.getElementById('test');
var span = document.createElement('span');
span.appendChild(document.createTextNode('ok'));
test.appendChild(span);
Mentre in jQuery avremmo solo:
$('#test').append('<span>ok</span>');
Ad ogni modo, l'accesso tradizionale è in alcuni casi di gran lunga più veloce e performante dell'accesso tramite una libreria. Il fatto è che i metodi e le proprietà del DOM vengono implementati nel linguaggio nativo del browser, da cui la maggiore velocità.