Il DOM (Document Object Model) rappresenta la struttura ad albero con cui vengono rappresentate le pagine web.
Un albero rovesciato
Partiamo da una pagina HTML elementare:
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="test">Ciao mondo!</p>
</body>
</html>
La struttura del DOM è un albero rovesciato in cui l'elemento radice (html
) contiene tutti gli altri elementi che si organizzano in nodi secondo un rapporto di parentela. Ecco il diagramma della nostra struttura:
Abbiamo:
head
ebody
sono figli (child) dello stesso genitore (html
, detto parent) quindi si dicono nodi fratelli o consanguinei (sibling)title
è figlio dihead
Test
è un nodo di testo figlio dititle
- Il paragrafo con ID
test
è figlio dibody
- L'id del paragrafo è un nodo attributo unito all'elemento stesso
Ciao mondo!
è un nodo di testo figlio del paragrafo con IDtest
- Poiché
html
contiene tutti gli elementi, allora si può definire come l'antenato (ancestor) del paragrafo.
Il punto ora è accedere ai vari nodi usando l'implementazione DOM di JavaScript. Tenete presente che il DOM e JavaScript sono due cose distinte: il DOM è un'interfaccia indipendente dal linguaggio utilizzato (esistono implementazioni in PHP, Python, C++, Java eccetera), mentre JavaScript è un linguaggio di programmazione orientato/basato sugli oggetti.
Metodi e proprietà del DOM
Secondo il DOM, ciascun elemento di una pagina è un oggetto che può avere metodi e proprietà, esattamente come accade per i metodi e le proprietà degli oggetti JavaScript.
L'oggetto di prima categoria nel DOM è l'oggetto document
. Questo oggetto rappresenta l'intero documento HTML (da cui il nome).
Alcuni metodi e proprietà di questo oggetto sono:
- Proprietà
document.title
Rappresenta la stringa testuale dell'elemento
title
. Può essere usata sia in lettura che scrittura. - Proprietà
document.body
Riferimento all'elemento
body
. Sola lettura. - Proprietà
document.lastModified
Stringa contenente la data dell'ultima modifica del documento. Sola lettura.
- Metodo
document.getElementsByTagName(tag)
Restituisce una collezione di nodi corrispondenti al nome dell'elemento
tag
. - Metodo
document.getElementById(id)
Restituisce un riferimento all'elemento con attributo ID uguale ad
id
. - Metodo
document.querySelector(espressione)
Restituisce un riferimento ad un elemento selezionato tramite un'espressione CSS (es.
#test
). - Metodo
document.querySelectorAll(espressione)
Restituisce una collezione di nodi corrispondente agli elementi selezionati tramite un'espressione CSS (es.
#test p
).
I comuni elementi possono a loro volta avere delle proprietà molto utili, quali:
firstChild
,lastChild
,previousSibling
,nextSibling
Proprietà che rappresentano rispettivamente il primo nodo figlio, l'ultimo nodo figlio, il fratello precedente di un nodo e il fratello successivo di un nodo.
childNodes
Una collezione di nodi figli (compresi gli attributi).
parentNode
Riferimento al nodo genitore.
nodeName
Il nome dell'elemento.
nodeType
Il tipo di nodo come costante. Può essere sia in formato letterale che numerico. I valori numerici 1 e 3, ad esempio, indicano rispettivamente un nodo di tipo elemento e di tipo testo.
nodeValue
Il valore del nodo.
L'elenco potrebbe continuare molto a lungo. Facciamo un esempio pratico. Prendiamo questa nuova struttura:
<div id="test">
<ul>
<li>A</li>
<li id="b">B</li>
<li>C</li>
</ul>
</div>
Per prima cosa, selezioniamo il genitore della struttura:
let test = document.getElementById('test');
Abbiamo usato il suo ID in questo caso. Possiamo selezionare anche la lista al suo interno usando il nome di questo tag:
let ul = test.getElementsByTagName('ul')[0];
La collezione restituita da getElementsByTagName()
può essere usata come un array (anche se non è un array),
quindi usiamo in questo caso l'indice della collezione.
Possiamo selezionare le voci di lista con lo stesso metodo:
let li = ul.getElementsByTagName('li');
for(let i = 0; i < li.length; i++) {
let element = li[i];
if(element.hasAttribute('id')) {
console.log(element.getAttribute('id')); // B
}
}
Come si può notare, l'accesso al DOM diventa più chiaro quando si supera il primo impatto dovuto alla novità dell'argomento.