Vai al contenuto
Home » Notes » DOM : Document Object Model

DOM : Document Object Model

Il Document Object Model – abbreviato DOM – è una interfaccia di programmazione (API) per costruire e manipolare documenti HTML e XML.
Il DOM, quindi, fornisce una struttura logica degli elementi del documento. Ogni elemento può essere modificato, cancellato o aggiunto tramite il DOM. Il DOM ha una struttura gerarchica.

Prendiamo un esempio di pezzo di documento HTML:

Ecco, puoi pensare visivamente il DOM di questo pezzo di documento HTML come qualcosa del tipo:

esempio visuale DOM
esempio visuale struttura del Document Object Model

Caratteristiche del DOM:

Ogni elemento del DOM si basa sulla classe astratta Node. Proprio come in una struttura dati ad albero, i nodi hanno un parent (elemento genitore) e zero o più children (elementi figli). DOM Node è l’interfaccia fondamentale che fornisce tutti i metodi per manipolare ogni nodo permettendo, tra le altre, le seguenti operazioni:

  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
  • hasChildNodes()
  • hasAttributes()

Lista completa qui

DOM Document è l’interfaccia che rappresenta tutto il documento e funge da “entry point” per il DOM. DOM Document fornisce metodi per funzionalità che riguardano l’intero documento, come ad esempio:

  • createElement(tagname) per creare un elemento di un certo tag
  • getElementById(id) per selezionare un elemento del DOM in base al suo attributo id
  • getElementsByTagName(tagname) per selezionare tutti gli elementi di un certo tag

Piccolo esempio pratico di manipolazioni di elementi del documenti tramite il DOM:

Nel seguente piccolo esempio pratico vediamo come manipolare una parte di documento HTML tramite il DOM.
Scrivi qualcosa nella textbox e poi premendo il primo pulsante potrai modificare l’elemento h1 (titolo) sovrascrivendone il contenuto. Premendo il secondo pulsante, invece, potrai creare nel documento HTML un nuovo elemento di tipo paragrafo p. Queste manipolazioni sono fatte proprio tramite il DOM – document object model. Prova!

Titolo

Il codice completo di questo esempio:

In particolare, la funzione cambiaTitolo() seleziona l'elemento h1 con il metodo document.getElementById("titolo") e poi assegna al contenuto del titolo il valore della textbox, anch'essa selezionata con il metodo document.getElementById("textbox")

La function aggiungiElemento(), invece, seleziona il div del documento HTML, crea un nuovo elemento paragrafo con document.creatElement("p"), gli assegna il contenuto e poi inserisce questo elemento nella pagina con l'operazione div.appendChild(p);

Prosegui con: storia e caratteristiche di HTML

Grazie per la lettura

Lascia un commento

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