DOM Tutorial
Iniziare con DOM

Osservazioni

Versioni

Recupero di elementi html esistenti

Una delle attività più comuni è il recupero di un elemento esistente dal DOM da manipolare. Più comunemente questi metodi sono eseguiti su document , perché è il nodo radice, ma tutti questi metodi funzionano su qualsiasi elemento HTML nella struttura. Restituiranno solo i bambini dal nodo su cui è eseguito.

Recupera per id

var element = document.getElementById("logo");

element conterrà l' element (solo) che ha l'attributo id impostato su "logo" o contiene null se non esiste alcun elemento di questo tipo. Se esistono più elementi con questo ID, il documento non è valido e può succedere di tutto.

Recupera per nome del tag

var elements = document.getElementsByTagName("a");

elements conterranno un live HTMLCollection (un oggetto array-like) di tutti i tag collegamento nel documento. Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento di collegamento HTML incontrato o null se l'indice è fuori limite

var length = elements.length;

length è uguale al numero di elementi di collegamento HTML attualmente presenti nell'elenco. Questo numero può cambiare quando viene modificato il DOM.

Recupera per classe

var elements = document.getElementsByClassName("recipe");

elements conterranno un live HTMLCollection (un oggetto array-like) di tutti gli elementi in cui la loro class attributo comprende "ricetta". Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento HTML incontrato con questa classe. Se non ci sono tali elementi, l' element ha il valore undefined nel primo esempio e null nel secondo esempio.

var length = elements.length;

length è uguale al numero di elementi HTML che attualmente hanno la "ricetta" di classe. Questo numero può cambiare quando viene modificato il DOM.

Recupera per nome

var elements = document.getElementsByName("zipcode");

elements conterranno un live NodeList (un oggetto array-like) di tutti gli elementi con il loro name attributo impostato su "codice postale". Questa raccolta è sincronizzata con il DOM, quindi tutte le modifiche apportate al DOM si riflettono in questa raccolta. La collezione fornisce accesso casuale e ha una lunghezza.

var element = elements[0];
//Alternative
element = elements.item(0);

element contiene il primo elemento HTML incontrato con questo nome.

var length = elements.length;

length è uguale al numero di elementi HTML che attualmente hanno "zipcode" come loro attributo name. Questo numero può cambiare quando viene modificato il DOM.

Iniziare

Il DOM (Document Object Model) è l'interfaccia di programmazione per documenti HTML e XML, definisce la struttura logica dei documenti e il modo in cui un documento è accessibile e manipolato.

I principali implementatori dell'API DOM sono i browser web. Le specifiche sono standardizzate dal W3C e dai gruppi WHATWG e il modello dell'oggetto specifica il modello logico per l'interfaccia di programmazione.

La rappresentazione della struttura DOM assomiglia ad una vista ad albero, in cui ogni nodo è un oggetto che rappresenta una parte del markup, a seconda del tipo ogni elemento eredita anche funzionalità specifiche e condivise.

Il nome "Document Object Model" è stato scelto perché è un "modello di oggetto" nel senso tradizionale del design orientato agli oggetti: i documenti sono modellati usando gli oggetti e il modello comprende non solo la struttura di un documento, ma anche il comportamento di un documento e gli oggetti di cui è composto. In altre parole, prendendo il diagramma HTML di esempio, i nodi non rappresentano una struttura dati, rappresentano oggetti, che hanno funzioni e identità. Come modello a oggetti, il modello a oggetti del documento identifica:

• le interfacce e gli oggetti utilizzati per rappresentare e manipolare un documento
• semantica di queste interfacce e oggetti - inclusi sia il comportamento che gli attributi
• le relazioni e le collaborazioni tra queste interfacce e oggetti

Attendere il caricamento del DOM

Usa DOMContentLoaded quando il codice <script> che interagisce con DOM è incluso nella sezione <head> . Se non è racchiuso all'interno del callback DOMContentLoaded , il codice genererà errori come

Impossibile leggere qualcosa di null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternativa a DOMContentLoaded

Un'alternativa (adatta per IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

Usa innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

e ora l'HTML sembra così

<div id="app">
    <p>Some text</p>
</div>

Markup HTML

esempio di input:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Output elemento DOM:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Tutti gli elementi precedenti ereditano dall'interfaccia HTMLElement e vengono personalizzati in base a tag specifici