Introduzione al DOM in JavaScript

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:

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

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


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.

Riferimenti

Guida DOM

Torna su