Mappa del sito
Il DOM, leggerlo e comprenderlo
Visita anche Risorse per i webmasterarchivio di risorse per la creazione dei siti web
Sommario:
Questa pagina è un completamento della guida Come creare un sito da zero
Il DOM (Document Object Model = modello a oggetti del documento) è la rappresentazione grafica ad albero del codice HTML di una pagina web. Viene creato in automatico dal browser ad ogni caricamento della pagina e ha un'organizzazione gerarchica che comprende elementi e sotto-elementi. Possiamo immaginarlo proprio come un albero genealogico in cui ci sono: il capostipite, i suoi figli e la discendenza.
Nel DOM della pagina HTML il capostipite (root = radice) è il tag <html> e i figli diretti sono <head> e <body>. Da loro parte la discendenza con tutti gli elementi che possono essere a loro volta padri e avere figli e fratelli. Esattamente come in un albero genealogico, si chiamano figli solo i discendenti diretti, ma, a differenza dell'albero genealogico, tutti gli altri sono discendenti generici indipendentemente dalla profondità di annidamento. La diversificazione, vedremo più avanti, si basa solo sulle caratteristiche di ognuno.
Mettiamo di avere questo codice HTML:
<html>
<head>
<title>Titolo pagina</title>
</head>
<body>
<h1>Intestazione</h1>
Testo.
<p>Testo <span>testo</span></p>
<img src="">
<footer></footer>
</body>
</html>
Il grafico del DOM sarà simile a questo:
Il linguaggio HTML (Hyper Text Markup Language) è un linguaggio di markup che descrive gli elementi (dati) di una pagina web tramite dei marcatori (tag) (es.: <head>, <body>, <title>, <div>, <p>, <br> ecc.)
Ogni volta che una pagina viene caricata nel browser di un utente, il browser stabilisce una connessione per ricevere le risorse e iniziare l'analisi che trasforma il markup HTML in un albero DOM.
L'albero del DOM viene sempre introdotto da "Document".
Il DOM permette di operare su qualunque elemento all'interno della pagina ovunque sia annidato.
Il linguaggio JavaScript permette di accedere a specifici elementi del DOM per modificarli.
Tutte le operazioni sul DOM via javascript sono introdotte con l’oggetto "Document" che corrisponde, come detto, alla prima voce dell'albero.
Esempio:
document.getElementById(id)
Gli elementi
Gli elementi di una pagina HTML si dividono in elementi di blocco ed elementi inline.Gli elementi di blocco possono, a loro volta, contenere altri elementi di blocco o elementi inline. Un elemento di blocco non può avere altri elementi sulla stessa riga. Il contenuto che viene dopo un elemento di blocco si pone automaticamente su una nuova riga, oppure l'elemento di blocco pone se stesso su una nuova riga dopo il contenuto. Es: <div>, <p>, <h1>....
Gli elementi inline possono contenere solo altri elementi inline e non elementi di blocco. Il contenuto della pagina si distribuisce intorno a loro e non danno origine ad una nuova riga. Es: <span>, <strong>, <img>....
Naturalmente, tramite le regole css e la proprietà display (display:block; display:inline;), possiamo modificare le caratteristiche degli elementi trasformando un elemento di blocco in un elemento inline e viceversa.
Una caratteristica dei CSS sta nel fatto che le proprietà di un elemento genitore possono essere ereditate dai suoi discendenti. La struttura ad albero del DOM permette di sfruttare al meglio questo meccanismo.
Lista degli elementi di blocco e inline
Definizioni
Differenza tra elemento e nodo
Elemento: Un elemento è sempre definito da un tag di apertura, un contenuto e un tag di chiusura e può contenere altri elementi nidificati. Tutti i documenti HTML sono costituiti da elementi nidificati. In un documento html, l'elemento <html> è l'elemento root che contiene l'intero documento HTML. Tutti i documenti html sono costituiti da elementi nidificati.Gli elementi senza contenuto sono chiamati elementi vuoti. (esemoio: <br>).
Ogni elemento (tag) della pagina web è un nodo del DOM.
Tutti gli elementi possono avere attributi.
Nodo: Un nodo può essere qualunque cosa, un elemento, una stringa di testo o un commento.
Un nodo può racchiudere tutti gli elementi.
Il nodo è rappresentato nell'albero come un rettangolo con un nome all'interno.
Profondità del DOM
Per profondità del DOM si intende il numero di nodi di un ramo.Principali tipi di nodi
Esistono 3 tipi principali di nodi:Nodo elemento
Ogni elemento della pagina web.Nodo di testo
Tutto ciò che nel codice HTML non è contenuto tra parentesi angolari (<>), viene interpretato dal DOM come nodo testuale. I nodi testuali sono nodi terminali del ramo, non possono avere figli, ne' attributi.Nodo attributo
I nodi attributi non sono considerati figli, non fanno parte della struttura del DOM e non vengono conteggiati. Gli attributi forniscono informazioni aggiuntive sugli elementi e sono sempre specificati nel tag di inizio con un nome e un valore.Esempio:
<p class="pippo">Hello World!</p>
Questa stringa contiene 2 nodi. Un nodo elemento: <p></p> e un nodo testuale: Hello World!
Il nodo di testo "Hello World!" è figlio del nodo elemento <p></p> perché si trova al suo interno.
Il nodo attributo class="pippo" non è considerato figlio del nodo elemento <p></p> e non viene conteggiato.
Gerarchia
Ogni nodo del DOM ha un nodo genitore (parent).Ogni nodo genitore può avere più nodi figli (child) o nodi fratelli (sibling).
Nodo genitore (parent)
Nodo che ha almeno un nodo figlio diretto.Nodo figlio (child)
Nodo che discende direttamente da un nodo genitore.Nodi fratelli (siblings)
Nodi che hanno lo stesso nodo genitore.Nodi discendenti (descendants)
Tutti gli elementi che sono annidati a qualsiasi livello nell’elemento genitore: figli, figli dei figli ecc.Esempio:
<div><p>Pippo</p></div>
Il nodo <div> è genitore del nodo <p> ma non del nodo testo "Pippo".
Il nodo <p> è figlio del nodo <div>.
Il nodo <p> è genitore del nodo testo.
Il nodo testo è figlio del nodo <p>.
Il nodo <p> e il nodo testo sono entrambi discendenti del nodo <div>.
Se all'interno del nodo div ci fossero due nodi <p></p>, sarebbero nodi fratelli entrambi figli del nodo <div>.
Altro esempio:
<html>
<head>
</head>
<body>
</body>
</html>
<head> e <body> sono fratelli e figli dell'elemento <html>.
Leggi anche "Metodi differenti per selezionare elementi DOM" nella guida: CSS e JS
Considerazioni
Una dimensione eccessiva del DOM può causare penalizzazioni nel punteggio di prestazione della pagina.Leggi anche: Velocità e performance di un sito web
Elenco argomenti di questa guida:
Leggi tutto
Torna alla pagina principale:Creare un sito da zero ->>
Continua con: Come includere contenuti tramite file esterni