BOM e DOM - Conosci la differenza?

Quando si lavora con JavaScript nel contesto di un browser web, due concetti fondamentali emergono rapidamente: BOM (Browser Object Model) e DOM (Document Object Model). Anche se spesso menzionati insieme, svolgono ruoli diversi nella gestione di una pagina web.

In questo articolo chiariremo cosa sono, a cosa servono, come si usano e soprattutto quali sono le differenze tra BOM e DOM.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

💻Cos'è il BOM?

Definizione

Il Browser Object Model (BOM) è un insieme di oggetti forniti dal browser che permette a JavaScript di interagire con l’ambiente circostante la pagina web, ovvero il browser stesso.

A cosa serve

Il BOM permette di:

Aprire e chiudere finestre (window.open(), window.close())
Navigare tra URL (window.location)
Mostrare popup (alert(), confirm(), prompt())
Gestire la cronologia (window.history)
Rilevare informazioni del browser e dello schermo (navigator, screen)

In pratica, il BOM fornisce l’interfaccia tra JavaScript e il browser.

Come si usa

Ecco alcuni esempi pratici:

// Aprire una nuova finestra
window.open("https://www.example.com");

// Mostrare un messaggio di conferma
if (confirm("Sei sicuro di voler continuare?")) {
  console.log("Confermato");
}

// Reindirizzare l’utente
window.location.href = "https://www.altrosito.com";

Oggetti disponbili nel BOM

Ecco un elenco dei principali oggetti del BOM (Browser Object Model), cioè gli oggetti che JavaScript può usare per interagire con il browser (non con la pagina HTML):

🔹 `window`

Oggetto globale che rappresenta la finestra del browser.
Tutti gli altri oggetti BOM sono proprietà di window.
Esempi:
- window.open() – apre una nuova finestra
- window.alert() – mostra un messaggio
- window.setTimeout() – esegue codice dopo un intervallo

🔹 `navigator`

Contiene informazioni sul browser dell’utente.
Proprietà comuni:
- navigator.userAgent – stringa con info sul browser
- navigator.language – lingua impostata
- navigator.onLine – stato della connessione
- navigator.geolocation – accesso alla posizione (con permesso)

🔹 `screen`

Fornisce dettagli sullo schermo del dispositivo.
Proprietà comuni:
- screen.width, screen.height – dimensioni dello schermo
- screen.availWidth, screen.availHeight – spazio disponibile (senza taskbar)

🔹 `location`

Gestisce l’URL della pagina corrente.
Proprietà:
- location.href – URL completo
- location.hostname, location.pathname, location.protocol
Metodi:
- location.assign(url) – cambia pagina
- location.reload() – ricarica la pagina

🔹 `history`

Interagisce con la cronologia del browser.
Metodi:
- history.back() – va alla pagina precedente
- history.forward() – va alla pagina successiva
- history.go(n) – spostamento relativo nella cronologia

🔹 `console`

Utile per debug e sviluppo.
Metodi principali:
- console.log(), console.warn(), console.error()

🔹 `alert`, `prompt`, `confirm`

Funzioni modali che interagiscono direttamente con l’utente:
- alert("Ciao!") – mostra un messaggio
- prompt("Inserisci il tuo nome:") – chiede un input testuale
- confirm("Sei sicuro?") – chiede una conferma (OK/Annulla)

🔹 `setTimeout` / `setInterval`

Pianificazione temporale:
- setTimeout(fn, ms) – esegue una volta dopo un ritardo
- setInterval(fn, ms) – esegue periodicamente

🌐Cos'è il DOM?

Definizione

Il Document Object Model (DOM) rappresenta la struttura del contenuto HTML della pagina come un insieme di oggetti. Ogni elemento HTML diventa un nodo nel DOM, e JavaScript può accedervi e modificarlo in tempo reale.

A cosa serve

Il DOM consente di:

Accedere agli elementi HTML (document.getElementById(), querySelector())
Modificare contenuti e attributi (innerText, setAttribute)
Aggiungere o rimuovere elementi (appendChild(), removeChild())
Gestire eventi utente (addEventListener())

In sintesi, il DOM fornisce un modo per interagire e modificare il contenuto e la struttura della pagina web.

Come si usa

Ecco alcuni esempi pratici:

// Cambiare il testo di un elemento
document.getElementById("titolo").innerText = "Nuovo Titolo";

// Creare un nuovo paragrafo e aggiungerlo al body
let p = document.createElement("p");
p.textContent = "Questo è un nuovo paragrafo.";
document.body.appendChild(p);

// Aggiungere un gestore di eventi a un bottone
document.querySelector("button").addEventListener("click", (e) => {
  alert("Hai cliccato il bottone!");
});

Oggetti disponbili nel DOM

Ecco un elenco chiaro e organizzato dei principali oggetti del DOM (Document Object Model), ovvero quelli che JavaScript usa per interagire con la struttura della pagina HTML:

🔹 `document`

Oggetto principale del DOM, rappresenta l’intera pagina HTML.
Funzioni comuni:
- document.getElementById(id)
- document.querySelector(cssSelector)
- document.createElement(tagName)
- document.body, document.head

🔹 `HTMLElement` (e sottoclassi)

Oggetti che rappresentano elementi HTML (es. <div>, <p>, <input>).
Proprietà comuni:
- element.innerHTML, element.textContent, element.value
- element.classList, element.style, element.id
Metodi:
- element.setAttribute(name, value)
- element.appendChild(node)
- element.remove()
- element.addEventListener(event, handler)

🔹 `Node`

Ogni elemento del DOM è un nodo.
Tipi: Element, Text, Comment, Document, DocumentFragment
Proprietà:
- node.nodeType, node.nodeName
- node.parentNode, node.childNodes, node.firstChild
Metodi:
- node.appendChild(), node.removeChild()
- node.cloneNode()

🔹 `NodeList` / `HTMLCollection`

Raccolte di elementi:
- NodeList da querySelectorAll(), supporta .forEach()
- HTMLCollection da getElementsByTagName(), live (aggiornato in tempo reale)

🔹 `Event`

Oggetto che rappresenta un evento (click, input, ecc.).
Proprietà:
- event.type, event.target, event.currentTarget
Metodi:
- event.preventDefault(), event.stopPropagation()

🔹 `Attribute`

Oggetto che rappresenta un attributo HTML.
Usato raramente direttamente; più spesso con:
- element.getAttribute(name)
- element.setAttribute(name, value)

🔹 `Text`

Nodo che rappresenta un testo all’interno di un elemento.
Usato per leggere/modificare testo nei nodi:
- element.textContent
- element.firstChild.nodeValue

🔹 `DocumentFragment`

Contenitore “leggero” per manipolare più nodi prima di inserirli nel DOM.
Utile per migliorare le prestazioni durante aggiornamenti complessi.

Bonus: API utili collegate al DOM

MutationObserver – osserva modifiche al DOM
Range – rappresenta un intervallo di nodi
Selection – gestisce selezioni di testo

↔️ Differenze tra BOM e DOM

Aspetto	BOM	DOM
Scopo	Interazione con il browser	Manipolazione del documento
Accesso	Oggetti come `window`, `navigator`, `location`, `history`	Oggetti come `document`, `element`, `node`
Funzioni	Controllo finestre, popup, cronologia, URL	Creazione e modifica degli elementi HTML
Specificità	Dipende dal browser	Standardizzato dal W3C
Utilizzo tipico	Reindirizzamenti, popup, info browser	Cambiare contenuto, gestire eventi, animazioni

❓Quando usare l’uno o l’altro?

Usa il DOM quando vuoi interagire con la pagina, ad esempio per mostrare contenuti, rispondere agli input degli utenti, o modificare dinamicamente l’HTML.
Usa il BOM quando devi interagire con il browser, come cambiare URL, gestire finestre o accedere ai dati del dispositivo.

Spesso, BOM e DOM lavorano insieme: ad esempio, puoi usare il BOM per rilevare una dimensione dello schermo (screen.width) e poi usare il DOM per adattare la visualizzazione.

⭐ Conclusione

Conoscere la differenza tra BOM e DOM è fondamentale per scrivere codice JavaScript efficace e comprensibile. Il BOM ti collega al browser, il DOM ti collega alla pagina. Entrambi sono strumenti potenti: saperli usare correttamente fa la differenza tra uno script che funziona e un’esperienza utente davvero dinamica.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog