path: root/files/it/web/api/document_object_model/introduzione/index.html

---
title: Introduzione al DOM
slug: Web/API/Document_Object_Model/Introduzione
tags:
  - Beginner
  - DOM
  - Guida
  - HTML DOM
  - Introduzione
  - Principianti
  - Tutorial
translation_of: Web/API/Document_Object_Model/Introduction
---
<p><span class="seoSummary">Il <strong>Document Object Model</strong> (<strong>DOM</strong>) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta </span>un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.</p>

<h2 id="Che_cosè_il_DOM">Che cos'è il DOM?</h2>

<p>Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.</p>

<p>La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.</p>

<p>Gli standard <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.</p>

<p>Per esempio, lo standard DOM specifica che il metodo <code>getElementsByTagName</code> usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <code>&lt;p&gt;</code> nel documento.</p>

<pre class="brush: js">const paragrafi = document.getElementsByTagName("p");
// paragrafi[0] è il primo &lt;p&gt; elemento
// paragrafi[1] è il secondo &lt;p&gt; elemento, etc.
alert(paragrafi[0].nodeName);
</pre>

<p>Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto <code>document</code> che rappresenta il documento stesso, l'oggetto <code>table</code> che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.</p>

<p>Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'<a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.</p>

<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2>

<p>Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.</p>

<p>Agli inizi, JavaScript e il DOM </p>

<p>All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:</p>

<p>API = DOM + JavaScript</p>

<p>Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:</p>

<pre class="brush: python"># Esempio DOM in Python
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")
</pre>

<p>Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p>

<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accedere al DOM</h2>

<p>Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di </p>

<p>Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .</p>

<p>Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <code>&lt;script&gt;</code> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.</p>

<pre class="brush: html">&lt;body onload="window.alert('Benvenuto nella mia pagina web!');"&gt;
</pre>

<p>Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.</p>

<pre class="brush: html">&lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;
       // esegui questa funzione quando la pagina è stata caricata
       window.onload = function() {

         // crea un paio di elementi in una pagina HTML altrimenti vuota
         const heading = document.createElement("h1");
         const heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Important_Data_Types" name="Important_Data_Types">Tipi di dati fondamentali</h2>

<p>Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come <strong>elementi</strong> anche se, a rigor di termini, non tutti i nodi sono un elemento.</p>
</div>

<p>La tabella seguente descrive brevemente questi tipi di dati.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Tipi di dati (Interfaccia)</th>
   <th>Descrizione</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("Document")}}</td>
   <td>
    <p>Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà <code>ownerDocument</code> di un elemento restituisce il <code>document</code> a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descrive l'oggetto del documento.</p>
   </td>
  </tr>
  <tr>
   <td>{{domxref("Node")}}</td>
   <td>Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.</td>
  </tr>
  <tr>
   <td>{{domxref("Element")}}</td>
   <td>Il tipo <code>element</code> è basado sul <code>node</code>. Si riferisce a un elemento o un nodo di tipo <code>element</code> restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un <code>node</code>, diciamo solo che questo metodo restituisce l'<code>element</code> che è stato appena creato nel DOM. Gli oggetti <code>element</code> implementano l'interfaccia DOM <code>Element</code> e anche l'interfaccia <code>Node</code> più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).</td>
  </tr>
  <tr>
   <td>{{domxref("NodeList")}}</td>
   <td>Una <code>nodeList</code> è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel <code>nodeList</code> sono accessibili, da indice, tramite due opzioni:
    <ul>
     <li>list.item(1)</li>
     <li>list[1]</li>
    </ul>
    Questi due sono equivalenti. Nel primo, <code>item()</code> è un singolo metodo dell'oggetto <code>nodeList</code>. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.</td>
  </tr>
  <tr>
   <td>{{domxref("Attribute")}}</td>
   <td>Quando un <code>attribute</code> viene restituito da un membro (ad es. con il metodo <code>createAttribute()</code>), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.</td>
  </tr>
  <tr>
   <td>{{domxref("NamedNodeMap")}}</td>
   <td>Un <code>namedNodeMap</code> è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un <code>namedNodeMap</code> ha un metodo <code>item()</code> per questo scopo e puoi anche aggiungere e rimuovere elementi da una <code>namedNodeMap</code>.</td>
  </tr>
 </tbody>
</table>

<p>Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un <code>attribute</code>, ad esempio, e fare riferimento a un array di nodi DOM come <code>nodeList</code>. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.</p>

<h2 id="DOM_interfaces" name="DOM_interfaces">interfaccia DOM</h2>

<p>Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia <code>HTMLFormElement</code> ma la sua proprietà <code>className</code> dall'interfaccia <code>HTMLElement</code>. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.<br>
 <br>
 Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.</p>

<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfacce ed oggetti</h3>

<p>Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come <code>createCaption</code> e <code>insertRow</code>. Ma poiché è anche un elemento HTML, la <code>table</code> implementa l'interfaccia <code>Element</code> descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia <code>Node</code> di base, da quale <code>Element</code> deriva.</p>

<p>Quando si ottiene un riferimento a un oggetto <code>table</code>, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.</p>

<pre class="brush: js">const table = document.getElementById("table");
const tableAttrs = table.attributes; // Node/Element interface
for (let i = 0; i &lt; tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
</pre>

<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Principali interfacce nel DOM</h3>

<p>Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> alla fine di questo libro.</p>

<p>Gli oggetti <code>document</code> e <code>window</code> sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto <code>window</code> rappresenta qualcosa di simile al browser e l'oggetto <code>document</code> è la radice del documento stesso. L'<code>Element</code> eredita dall'interfaccia del <code>Node</code> generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.</p>

<p>Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.</p>

<ul>
 <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
 <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
 <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
 <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
 <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
 <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
 <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
 <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
 <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
 <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
 <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
 <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
</ul>

<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Test dell'API DOM</h2>

<p>Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <code>&lt;script&gt;</code>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.</p>

<p>Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento &lt;script&gt; nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.</p>

<p>Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione <code>test()</code> secondo necessità, creare più pulsanti o aggiungere elementi se necessario.</p>

<pre class="brush: html">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;DOM Tests&lt;/title&gt;
  &lt;script&gt;
    function setBodyAttr(attr, value) {
      if (document.body) document.body[attr] = value;
      else throw new Error("no support");
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div style="margin: .5in; height: 400px;"&gt;
    &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
    &lt;form&gt;
      &lt;select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);"&gt;
        &lt;option value="black"&gt;black&lt;/option&gt;
        &lt;option value="red"&gt;red&lt;/option&gt;
      &lt;/select&gt;
      &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
      &lt;select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);"&gt;
        &lt;option value="white"&gt;white&lt;/option&gt;
        &lt;option value="lightgrey"&gt;gray&lt;/option&gt;
      &lt;/select&gt;
      &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
      &lt;select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);"&gt;
        &lt;option value="blue"&gt;blue&lt;/option&gt;
        &lt;option value="green"&gt;green&lt;/option&gt;
      &lt;/select&gt;
      &lt;small&gt;
        &lt;a href="http://some.website.tld/page.html" id="sample"&gt;
          (sample link)
        &lt;/a&gt;
      &lt;/small&gt;&lt;br /&gt;
      &lt;input type="button" value="version" onclick="ver()" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.</p>

<figure>
<figcaption>Figure 0.1 Esempio DOM Test Page</figcaption>
<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>

<p>In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (<code>bgColor</code>), il colore dei collegamenti ipertestuali (<code>aLink</code>) e il colore del testo (<code>text</code>). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.</p>

<h2 id="Subnav">Subnav</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>

<div>{{DefaultAPISidebar("DOM")}}</div>