JavaScript
HTML
CSS
PHP
Coming Soon
Generatori
Varie & Old

DOM: introduzione

Introduzione al DOM

Il DOM è la rappresentazione ad albero del documento. Ogni tag è un nodo con figli. Il DOM è un’API del browser: JavaScript la usa per leggere e aggiornare struttura, contenuto e attributi.

Cos’è e come è fatto

Il DOM rappresenta l’HTML come un albero di nodi. Tipi principali: Document (radice), Element (tag), Text (testo). JavaScript usa le API del browser per leggere e modificare struttura, contenuto e attributi.


Nodi principali:

  • Document (radice)
  • Element (tag)
  • Text (testo)
  • Gli attributi si gestiscono tramite proprietà o getAttribute/setAttribute

Accesso ai nodi principali

Si può ispezionare il documento e i nodi di alto livello per capire la struttura corrente.

Document, html, head, body

CODE: JavaScriptpreleva codice
  1. console.log(document); // nodo radice del DOM
  2. console.log(document.documentElement); // <html> (intero albero)
  3. console.log(document.head); // <head>
  4. console.log(document.body); // <body>
  5. console.log(document.body.children); // HTMLCollection dei figli diretti di <body>

Selezione degli elementi

Per lavorare con il DOM è fondamentale saper selezionare gli elementi della pagina.

  • getElementById() recupera un singolo elemento in base al suo attributo id (molto veloce ed efficiente).
  • querySelector() permette di cercare un elemento usando un selettore CSS (ritorna solo il primo elemento che corrisponde).
  • querySelectorAll() invece restituisce tutti gli elementi che corrispondono al selettore, sotto forma di una NodeList che può essere iterata con forEach().

getElementById, querySelector, querySelectorAll

CODE: JavaScriptpreleva codice
  1. let titolo = document.getElementById("titolo");
  2. console.log(titolo.textContent); // stampa il testo del titolo
  3.  
  4. let primoPar = document.querySelector("p");
  5. console.log(primoPar.textContent); // stampa il contenuto del primo <p>
  6.  
  7. let paragrafi = document.querySelectorAll("p");
  8. paragrafi.forEach(p => console.log(p.textContent)); // stampa tutti i testi dei <p>

Attributi e classi

Gli attributi si leggono/scrivono con proprietà specifiche o con le API generiche. Le classi si gestiscono con classList.

getAttribute/setAttribute e classList

CODE: JavaScriptpreleva codice
  1. let link = document.querySelector("a");
  2. console.log(link.getAttribute("href")); // legge l'attributo href
  3. link.setAttribute("target", "_blank"); // imposta l'apertura in nuova scheda
  4.  
  5. let card = document.querySelector(".card");
  6. card.classList.add("attiva"); // aggiunge la classe
  7. card.classList.toggle("scura"); // se presente la rimuove, altrimenti la aggiunge
  8. card.classList.remove("attiva"); // rimuove la classe

Contenuti: textContent vs innerHTML

textContent tratta la stringa come testo letterale (sicuro). innerHTML interpreta la stringa come HTML (usare solo con contenuto fidato).

Scrittura di testo e HTML interno

CODE: JavaScriptpreleva codice
  1. let box = document.querySelector("#box");
  2. box.textContent = "<b>testo</b>"; // mostra i simboli come testo
  3. box.innerHTML = "<b>testo</b>"; // renderizza il grassetto

Creare, inserire e rimuovere nodi

Si crea con createElement, si assegna il contenuto, poi si inserisce con append/prepend/before/after.
Per eliminare un nodo usa remove.

Inserimento dinamico in una lista

CODE: JavaScriptpreleva codice
  1. let ul = document.querySelector("ul");
  2.  
  3. let li = document.createElement("li");
  4. li.textContent = "Voce dinamica"; // testo della nuova voce
  5.  
  6. ul.append(li); // inserisce alla fine della lista
  7.  
  8. let nota = document.createElement("p");
  9. nota.textContent = "Nota prima della lista";
  10. ul.before(nota); // posiziona il paragrafo prima della <ul>
  11.  
  12. li.remove(); // rimuove la voce inserita

Quando eseguire il codice

Assicurati che il DOM sia pronto. Usa l’evento DOMContentLoaded o l’attributo defer nello script.

Eseguire il codice quando il DOM è pronto

CODE: JavaScriptpreleva codice
  1. document.addEventListener("DOMContentLoaded", () => {
  2.   console.log("DOM pronto"); // gli elementi della pagina sono disponibili
  3. });
  4. // In alternativa in HTML: <script src="app.js" defer></script>

Tabella riassuntiva

API/Concetto Descrizione Esempio
document, head, bodyNodi principali del documentodocument.body
getElementByIdSelezione diretta per IDdocument.getElementById("titolo")
querySelector / AllSelettori CSS per cercare nodidocument.querySelector(".item")
textContentScrive/legge testo senza HTMLel.textContent = "Ciao"
innerHTMLScrive/legge HTML (attenzione sicurezza)el.innerHTML = "<b>Ok</b>"
get/setAttributeGestione generica degli attributiel.setAttribute("title","info")
classListGestione delle classi CSSel.classList.toggle("on")
createElement + appendCrea e inserisce nuovi nodiul.append(li)
removeRimuove un nodo dal DOMel.remove()
DOMContentLoaded / deferEsecuzione a DOM prontodocument.addEventListener(...)

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies