JavaScript nel Browser: Che cosa significa Document Object Model?

Scopri cosa significa Document Object Model e come manipolare le pagine web con JavaScript in questa breve guida!

Che cosa significa Document Object Model? E DOM manipulation?

Questo post è un riadattamento tratto da Il Piccolo Libro di JavaScript, tutto quello che avresti voluto sapere sul linguaggio JavaScript (ma non hai mai osato chiedere).

JavaScript non è fatto solo di “cose strane”. Questo linguaggio di scripting ha un’utilità primaria nella manipolazione delle pagine web. In questa breve guida vedrai alcuni delle principali funzioni che abbiamo a disposizione per interagire e modificare l’HTML di una pagina.

Che cosa significa Document Object Model?

Uno dei concetti fondamentali alla base del funzionamento dei browser è il DOM, acronimo per Document Object Model.

Questo parolone indica nient’altro che una qualsiasi pagina web. Quando visitiamo una pagina con un browser quest’ultimo crea una rappresentazione virtuale del documento.

La pagina viene trasformata in una struttura ad albero e poi salvata in memoria. Ogni elemento HTML diventa come una foglia, legata ad un ramo genitore. Per toccare la cosa con mano considera una semplice pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html>

Quando il markup viene interpretato dal browser il risultato è un Document Object Model che rappresenta l’HTML con una struttura ad albero.

In testa c’è document, detto root element seguito dall’elemento html . L’elemento html contiene un head che a sua volta racchiude title. Poi segue body che contiene a sua volta un h1. Ogni elemento HTML è rappresentato da un tipo specifico (detto anche interface dell’elemento) che può contenere testo o altri elementi innestati:

document (HTMLDocument)
  |
  | --> html (HTMLHtmlElement)
          |  
          | --> head (HtmlHeadElement)
          |       |
          |       | --> title (HtmlTitleElement)
          |                | --> text: "A super simple title!"
          |
          | --> body (HtmlBodyElement)
          |       |
          |       | --> h1 (HTMLHeadingElement)
          |              | --> text: "A super simple web page!"

Tutti gli elementi HTML discendono da Element che è l’interfaccia primordiale per gli elementi HTML ma la maggior parte degli stessi è “specializzata”. Per scoprire di che tipo è un particolare elemento HTML puoi ispezionarne a ritroso il suo prototype. L’elemento h1 per esempio è un HTMLHeadingElement:

document.querySelector('h1').__proto__

// Output: HTMLHeadingElement

Soprattutto per i principianti a questo punto potrebbe sorgere qualche dubbio sulla differenza tra document e window. Vediamo in che cosa sono diversi nella prossima sezione!

Che cosa significa Document Object Model? La differenza tra window e document

Qual’è la differenza tra document e window? Window si riferisce al browser stesso. Mentre document è la pagina HTML su cui operiamo in quel momento, ovvero il documento corrente. L’interfaccia document mette a disposizione una serie di metodi, tra cui querySelector() che serve a selezionare un qualsiasi elemento nella pagina:

document.querySelector('h1');

window invece rappresenta la finestra stessa del browser e questa istruzione equivale alla prima:

window.document.querySelector('h1');

In ogni caso la sintassi

document.nomeMetodo();

è quella più comune e la vedrai spesso all’interno del codice JavaScript che scriverai tu o che troverai già scritto da altri.

Che cosa significa Document Object Model? DOM manipulation

Ogni elemento HTML del DOM è anche un “Node”, un nodo. In effetti possiamo ispezionare il tipo di nodo con:

document.querySelector('h1').nodeType;

Il codice sopra ritorna 1, l’identificativo dei nodi di tipo Element. Possiamo ispezionare anche il nome di un qualsiasi nodo:

document.querySelector('h1').nodeName;

"H1"

L’esempio sopra ritorna il nome del nodo in maiuscolo. Comunque il concetto più importante da tenere presente è che in genere lavoriamo con due tipi di nodi principali:

  • nodi di tipo Element (HTML elements)
  • nodi di tipo Text (text nodes)

Per creare nuovi nodi Element il browser ci mette a disposizione l’API nativa createElement:

var heading = document.createElement('h1');

Mentre per creare nodi di testo usiamo createTextNode:

var text = document.createTextNode('Hello world');

I due nodi possono essere combinati insieme “appendendo” il testo all’interno dell’elemento HTML con appendChild. E per finire possiamo agganciare il nuovo elemento completo di testo sul body della pagina:

var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);

Questi tre metodi, createElement, createTextNode, appendChild sono tutto quello che devi sapere per iniziare a lavorare con JavaScript nel browser. Nei circoli nerd ci riferiamo a queste operazioni come a “DOM manipulation“.

Questo modo di manipolare il DOM è detto imperativo, ovvero “ordiniamo” al browser di costruire gli elementi, passo passo. L’opposto di imperativo è detto dichiarativo, concetto su cui si basano le moderne librerie front-end come React. Piuttosto che “ordinare” al browser come costruire un elemento dichiariamo ciò che vorremo visualizzare nel browser e la libreria si occupa del resto.

Che cosa significa Document Object Model? DOM manipulation e jQuery

Una delle domande che ricevo più spesso da parte degli sviluppatori JavaScript durante i corsi è “perchè dovrei utilizzare createElement e appendChild quando c’è jQuery”?

Oggi ci sono molte ragioni per rinfrescare la tua conoscenza dei cosiddetti metodi nativi del browser (createElement, createTextNode, appendChild, insertBefore ecc).

Non ci sono quasi più motivi validi per usare jQuery quando tutto quello che serve è una semplice manipolazione del DOM per creare o rimuovere elementi. Oltretutto jQuery pesa abbastanza come dipendenza ed è in procinto di essere rimossa anche da Bootstrap v5.

E quando l’applicazione diventa più complessa ci sono alternative più moderne. Uno sviluppatore esperto può anche creare il suo mini framework JavaScript astraendo le operazioni più comuni in un paio di moduli.

Che cosa significa Document Object Model? In conclusione

Il Document Object Model è una rappresentazione virtuale di tutti gli elementi HTML di una pagina, che il browser mantiene in memoria.

Quando creiamo o rimuoviamo elementi HTML con JavaScript si parla di DOM manipulation, che in passato veniva gestita principalmente con librerie come jQuery.

Anche se jQuery non scomparirà immediatamente è diventato ormai molto importante saper manipolare il DOM senza librerie esterne. Ci sono molte ragioni per farlo: le librerie fanno aumentare la dimensione dei file JavaScript e lavorare con “JavaScript puro” è a volte molto più performante.

Quando in dubbio su come creare elementi nella pagina o su quali metodi usare consulta la documentazione di MDN. Spesso ogni elemento HTML ha un’interfaccia con dei metodi nativi per manipolarne l’aspetto o i dati interni.

I metodi che userai più spesso sono document.createElement(), per creare nuovi elementi HTML. Poi document.createTextNode() per creare nodi testuali e non ultimo .appendChild() per aggiungere elementi HTML su altri elementi già presenti.

Conoscere le API native è si importante ma d’altro canto le moderne librerie front-end offrono dei vantaggi indiscutibili. Scrivere un’applicazione JavaScript di media complessità senza “farsi aiutare” da librerie di terze parti è fattibile. Ma molto spesso non è la scelta giusta. Mentre piccoli prototipi o semplici animazioni possono giustificare l’uso di JavaScript “puro”. E sicuramente in questi casi è la decisione più saggia.

Grazie per aver letto! Alla prossima!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.