Molti web designer che vogliono apprendere alcune nozioni sul DHTML e su JavaScript applicato agli effetti visuali di una pagina restano confusi di fronte al DOM (Document Object Model). Ad essere sinceri, il DOM è un concetto che richiede più un approccio da sviluppatore che non da designer. Infatti il DOM è la struttura che sta al di sotto della superficie visuale di una pagina e la controlla interamente. Niente può avvenire sulla pagina che non venga di fatto riflesso nel DOM. In questo articolo vorrei aiutare i miei fratelli e le mie sorelle web designer a comprendere meglio questo argomento.
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 HTML, 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 HTML è 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 HTML 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:
var 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:
var 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.
Quindi possiamo selezionare le voci di lista con lo stesso metodo:
var li = ul.getElementsByTagName('li');
for(var i = 0; i < li.length; i += 1) {
var element = li[i];
if(element.hasAttribute('id')) {
console.log(element.firstChild.nodeValue); // B
}
}
Come si può notare, l'accesso al DOM diventa più chiaro quando si supera il primo impatto dovuto alla novità dell'argomento.