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:
|
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.