HTML and CSS Reference
In-Depth Information
Object Model (DOM d'ora in poi). Quando una pagina viene inviata al browser, il browser
interpreta il codice HTML e lo renderizza. Allo stesso tempo, il browser crea un oggetto in
memoria per ogni frammento HTML (sia esso un tag input, un testo, un'immagine o qua-
lunque altra cosa). Alla fine, tutti gli oggetti creati vengono inseriti in una struttura unica:
il DOM.
Il DOM ha una struttura ad albero che è equivalente a quella della pagina. Così come
possiamo annidare tag, testi e altro ancora, anche nel DOM gli oggetti sono annidati e non
hanno quindi una struttura piatta. La
figura 8.1
mostra il DOM generato da una pagina
HTML.
Figura 8.1
- La parte sinistra della figura mostra gli oggetti nel DOM (viene mostrato il
codice HTML per comodità), mentre la parte destra mostra alcune delle proprietà
dell'oggetto selezionato (l'oggetto corrispondente al tag H1, in questo caso).
Come la
figura 8.1
mostra chiaramente, il DOM introduce un livello di astrazione tra
l'HTML e il nostro codice JavaScript. Infatti, senza il DOM, per recuperare gli oggetti nella
pagina dovremmo interpretare il codice HTML, con conseguente lentezza e complessità del
codice JavaScript. Queste operazioni vengono invece svolte dal browser, che poi inserisce
gli oggetti nel DOM, semplificando notevolmente il nostro lavoro.
In JavaScript possiamo accedere al DOM tramite la variabile
document
. Questa va-
riabile contiene un oggetto che espone tutti i metodi per navigare il DOM in base alle no-
stre necessità.
document
è una variabile creata dal browser, il che significa che non dob-
biamo preoccuparci di dichiararla e valorizzarla. Inoltre,
document
è anche una variabile
globale e cioè una variabile che è sempre raggiungibile da qualunque punto del codice Ja-
vaScript. Nella prossima sezione ci occupiamo di come sfruttare
document
per navigare
il DOM.
Supponiamo di voler recuperare dal DOM un oggetto
span
che ha l'attributo
id
impostato
su
text
. Per recuperare questo elemento dal DOM, possiamo utilizzare il metodo
ge-
