# JavaScript/DOM

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
Il DOM è una tecnologia standard del W3C per muoversi nella struttura di documenti XML. In relazione a JavaScript questo è molto interessante, in quanto un documento HTML ben formato è in realtà un documento XML, e tramite il DOM di JavaScript è possibile accedere a qualsiasi elemento nella pagina per modificarne le proprietà o per attivarne i metodi. Il DOM definisce anche un modello oggetto più evoluto del BOM che tratteremo quindi in modo più approfondito.

## BOM vs DOM

Ci si potrebbe a questo punto chiedere dove si sovrappongano il DOM che andremo ad analizzare e BOM che abbiamo appena visto e, soprattutto, perché abbiamo esaminato anche il BOM, nonostante sia meno evoluto.
Il problema sorge in realtà dall'evoluzione dei browser, che hanno creato dei propri standard prima della definizione del W3C. In realtà il DOM non è altro che un'evoluzione del BOM sviluppato inizialmente da browser come Netscape o Internet Explorer con l'avvento di JavaScript.
Solo successivamente il DOM è stato standardizzato, ma si continua ancora oggi ad usare il BOM, per problemi di compatibilità (anche se ormai questi sono praticamente minimi) o anche perché quest'ultimo è più "intuitivo" e non richiede di capire la gerarchia XML della pagina.

## La struttura gerarchica di un documento

Per poter lavorare con il DOM è però necessario capire la struttura ad albero di un documento, perché è su questa che si muove. Questa struttura è astratta e parte dalla gerarchia degli elementi in una pagina.
Prendiamo ad esempio questa pagina HTML:
È un semplice documento HTML contenente un'intestazione e un paragrafo. La sua struttura ad albero sarà la seguente:
Ogni elemento, di qualsiasi tipo esso sia, occupa una posizione ben definita. Ogni elemento nella struttura ad albero viene chiamato "nodo", e rappresenta nel modo più astratto ciascun elemento della pagina. Ad ogni nodo si può associare un nodo genitore, tranne che per il nodo radice del documento, nel nostro caso <html>. Ogni nodo può avere dei nodi figli (ad esempio l'intestazione e il paragrafo sono figli dell'elemento <body> e dei nodi fratelli (ad esempio <p> è fratello di <h1>).
Questa è un'altra differenza dal BOM: non esiste più un oggetto per ogni elemento nella pagina, ma esiste un oggetto astratto che li rappresenta tutti. Non sarà più quindi necessario studiare singolarmente ogni singolo elemento della pagina, ma solo i tipi di nodi più importanti.

### Vari tipi di nodo

L'oggetto Node è quindi, come abbiamo detto, il modo più astratto per indicare un elemento della pagina; per i diversi tipi di elemento esistono poi oggetti più specifici, che sono delle estensioni dell'oggetto Node; tra i più importanti troviamo:
* Document è un oggetto radice del documento. L'oggetto window.document è un'istanza di questo oggetto.
* Element è un nodo che rappresenta un elemento HTML (come <p>)
* Text è un nodo di testo, che costituisce l'ultimo nodo figlio di un elemento (ad esempio This is some text è un nodo di testo)