Document Object Model

Il DOM è uno standard w3c attraverso la quale la struttura di un documento è rappresentato sotto forma di un modello orientato agli oggetti. Esempio di struttura DOM su un documento HTML:

html head title titolo body tag tag tag

Attraverso javascript è possibile manipolare il DOM. L’oggetto base è document e rappresenta la radice del documento, il genitore di tutti gli altri elementi della pagina web.

Alcuni metodi dell’oggetto document sono:

• getElementById() – identifica un solo elemento della pagina tramite l’attributo ID;
• getElementByTagName() – identifica un set di elementi della pagina attraverso uno specifico tag;
• getElementByClassName() – identifica un set di elementi della pagina attraverso una specifica classe;

Tramite la proprietà innerHTML possiamo scrivere codice HTML all’interno di un qualsiasi nodo della pagine.

var testo = document.getElementById(‘nota’); testo.innerHTML = ‘qua scrivi il codice <b>HTML</b>’;

Ogni attributo si trasforma in oggetto che possiamo manipolare a nostro piacimento.

document.getElementById(‘nota’).style.color = ‘2020FF’;

Tramite il DOM possiamo anche assegnare un evento ad un elemento della pagina, possiamo creare degli event listener e possiamo associare diversi event handler.

Possiamo aggiungere un nuovo elemento che viene creato tramite createElement(), questo elemento è vuoto. Con il metodo appendChild() posizioniamo l’elemento in fondo, se invece vogliamo inserire il nuovo elemento in un determinato punto utilizziamo insertBefore(); ed infine  sostituire un elemento con il nuovo replaceChild().

Possiamo eliminare un elemento del DOM tramite removeChild().

Riassumiamo le proprietà per muoversi all’interno del documento:

• parentNode – accedere al nodo genitore dell’oggetto corrente;
• childNodes[indice] – accedere ad un determinato nodo figlio, l’indice parte da 0;
• firstChild – accedere al primo nodo dell’oggetto corrente;
• lastChild – accedere all’ultimo nodo dell’oggetto corrente;
• nextSibling – accedere al nodo successivo al nodo genitore;
• previousSibling – accedere al nodo precedente al nodo genitore;

Per accedere alla radice della nostra pagina HTML possiamo utilizzare la proprietà documentElement dell’oggetto document, se invece vogliamo selezionare solo il corpo del documento utilizziamo la proprietà body.