Introduzione al DOM

Questa traduzione è incompleta. Aiutaci a tradurre questo articolo dall’inglese

Il Document Object Model (DOM) è 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 un documento HTML o XML in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

Che cos'è il DOM?

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.

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.

Gli standard W3C DOM e WHATWG DOM 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.

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

const paragrafi = document.getElementsByTagName("p");
// paragrafi[0] è il primo <p> elemento
// paragrafi[1] è il secondo <p> elemento, etc.
alert(paragrafi[0].nodeName);

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

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM 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'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

DOM e JavaScript

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è 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.

Agli inizi, JavaScript e il DOM 

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:

API = DOM + JavaScript

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:

# 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")

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

Accedere al DOM

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 

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 .

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API document o 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 alert() dalla funzione window oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

<body onload="window.alert('Benvenuto nella mia pagina web!');">

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.

<html>
  <head>
    <script>
       // 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);
      }
    </script>
  </head>
  <body>
  </body>
</html>

Tipi di dati fondamentali

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.

Nota: 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 elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

La tabella seguente descrive brevemente questi tipi di dati.

Tipi di dati (Interfaccia) Descrizione
Document

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

Node 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.
Element Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metododocument.createElement() restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia HTMLElement dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio HTMLTableElement per <table> elements).
NodeList Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.document.getElementsByTagName(). Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni:
  • list.item(1)
  • list[1]
Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
Attribute Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), 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.
NamedNodeMap Un namedNodeMap è 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 namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo Attribute semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

interfaccia DOM

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 HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.

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.

Interfacce ed oggetti

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata HTMLTableElement, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM 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 Node di base, da quale Element deriva.

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

const table = document.getElementById("table");
const tableAttrs = table.attributes; // Node/Element interface
for (let i = 0; i < 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";

Principali interfacce nel DOM

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 DOM Examples alla fine di questo libro.

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node 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.

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

Test dell'API DOM

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 <script>, 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.

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 <script> 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.

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 test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

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

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.

Figure 0.1 Esempio DOM Test Page
Image:DOM_Ref_Introduction_to_the_DOM.gif

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