Introduzione al DOM per web designer

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:

Struttura DOM

Abbiamo:

  1. head e body sono figli (child) dello stesso genitore (html, detto parent) quindi si dicono nodi fratelli o consanguinei (sibling)
  2. title è figlio di head
  3. Test è un nodo di testo figlio di title
  4. Il paragrafo con ID test è figlio di body
  5. L'id del paragrafo è un nodo attributo unito all'elemento stesso
  6. Ciao mondo! è un nodo di testo figlio del paragrafo con ID test
  7. 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:

  1. Proprietà document.title

    Rappresenta la stringa testuale dell'elemento title. Può essere usata sia in lettura che scrittura.

  2. Proprietà document.body

    Riferimento all'elemento body. Sola lettura.

  3. Proprietà document.lastModified

    Stringa contenente la data dell'ultima modifica del documento. Sola lettura.

  4. Metodo document.getElementsByTagName(tag)

    Restituisce una collezione di nodi corrispondenti al nome dell'elemento tag.

  5. Metodo document.getElementById(id)

    Restituisce un riferimento all'elemento con attributo ID uguale ad id.

  6. Metodo document.querySelector(espressione)

    Restituisce un riferimento ad un elemento selezionato tramite un'espressione CSS (es. #test).

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

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

  2. childNodes

    Una collezione di nodi figli (compresi gli attributi).

  3. parentNode

    Riferimento al nodo genitore.

  4. nodeName

    Il nome dell'elemento.

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

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

Riferimenti

  1. Guida DOM
  2. HTML DOM Tutorial
Torna su