======Il DOM ======

[[namespace:javascript|Pagina principale di JavaScript]]

Il **Document Object Model (DOM)** è una rappresentazione gerarchica delle pagine HTML, come una struttura ad albero in cui ogni nodo dell'albero rappresenta un elemento all'interno del documento. 

Il DOM consente agli sviluppatori web di manipolare la struttura, il contenuto e lo stile di un documento web utilizzando JavaScript.

Caratterische principali:
  - **Struttura ad albero**: Il DOM organizza il documento come una struttura ad albero, con un nodo radice che rappresenta l'intero documento e nodi figli che rappresentano gli elementi HTML.
  - **Gerarchia dei nodi**: Ogni nodo nel DOM può avere nodi figli, nodi fratelli e un nodo padre, il che consente di navigare facilmente attraverso la struttura del documento.
  - **Nodi**: Ci sono diversi tipi di nodi nel DOM, tra cui nodi di testo, nodi di elemento, nodi di attributo e così via. I nodi di elemento rappresentano gli elementi HTML come <div>, <p>, <span>, ecc.
  - **Accesso e manipolazione**: Utilizzando JavaScript, è possibile accedere ai nodi del DOM, modificarli, aggiungerne di nuovi o rimuoverli. Questo consente agli sviluppatori di aggiornare dinamicamente il contenuto di una pagina web in risposta alle azioni degli utenti o ad altri eventi.
  - **Eventi**: Il DOM consente anche di gestire eventi come clic del mouse, pressioni sui tasti, caricamento della pagina e così via. È possibile associare funzioni di gestione degli eventi ai nodi del DOM per rispondere a queste interazioni degli utenti.

===== Esempio di DOM =====

<Code:HTML lunenums:1 | Codice HTML>
<!DOCTYPE html>
<html lang="it">
<head>
    <title>Mia Pagina</title>
</head>
<body>
    <h1>Titolo della pagina</h1>    
    <p>Testo della mia home page.</p>
    <p>Puoi anche vedere la mia nuova <a href="link">pagina</a></p>
</body>
</html>
</Code>

Il DOM che rappresenta questa pagina è:

{{:page:screenshot_2024-03-25_13.52.26.png?600|}}

=====Modifica del codice con JavaScript=====

<Code:HTML linenums:1 | Modifica HTML>
<!DOCTYPE html>
<html>
<head>
  <title>Esempio di DOM</title>
</head>
<body>

<div id="mioDiv"></div>

<script>
  // Seleziona l'elemento con id "mioDiv"
  let mioDiv = document.getElementById("mioDiv");

  // Aggiunge del testo al contenuto dell'elemento
  mioDiv.textContent = "Questo è un esempio di manipolazione del DOM.";
</script>

</body>
</html>
</Code>

In questo esempio, la riga di JavaScript seleziona l'elemento con id "mioDiv" e aggiunge del testo al suo contenuto utilizzando la proprietà "textContent".

===== L'Oggetto document =====

L'oggetto **document** è l' creato dal browser quando viene caricata una pagina HTML, ogni tag avrà un corrispondente all'inerno del document.

Nell'immagine precedente, ognuna delle scatole rappresenta un elemento della pagina, gli elementi 
raffigurati sono i **nodi**,

I nodi possono contenere o non contenere alri nodi, se non contengono nulla sono detti **nodi foglia**.

In informatica, un **oggetto** è una struttura che raggruppa dati, chiamati **proprietà**, e operazioni chiamate **metodi**, che possono essere eseguite su quei dati.

I metodi possono essere visti come funzioni che agiscono sull'oggeto a cui appartengono.

Come detto, document è l'oggetto che rappresenta la pagina, per questo per modificare la pagina bisogna agire sulle proprietà del document usando i metodi che mette a disposizione.