MICHELEPISANI.IT

Guida al DOM

Guida introduttiva al Document Object Model

Javascript - Guida al DOM: document, elementi, nodi
Agosto 06
07:432014

In questa guida introduttiva al DOM, per niente prolissa, verranno presi in considerazione i concetti base per la gestione e manipolazione degli elementi di una pagina web tramite Javascript (va fatto presente che i metodi per accedere al DOM possono anche essere altri).
Il DOM infatti, acronimo di Document Object Model, non è altro che un'API per descrivere le relazioni ed i collegamenti che gli oggetti hanno tra loro all'interno di un documento HTML o XML.

Il concetto che sta alla base del DOM è considerare una pagina web come se fosse un albero dove ogni elemento presente nella pagina rappresenta un nodo (quindi un tag è un nodo, un testo è un nodo e così via):

<html> <!-- nodo elemento -->
  <head> <!-- nodo elemento -->
    <title> <!-- nodo elemento -->
      DOM esempio <!-- nodo -->
    </title>
  </head>
  <body> <!-- nodo elemento -->
    <div id="contenitore"> <!-- nodo elemento  -->
      Questo è un contenitore <!-- nodo -->
      <div id="blocco"> <!-- nodo elemento  -->
        Questo è un altro contenitore <!-- nodo -->
      </div>
    </div>
  </body>
</html>

Nel codice rappresentato sopra sono contraddistinti i nodi del documento (albero) ed in particolare si può notare che alcuni sono definiti semplicemente nodi mentre altri sono definiti elementi.
Gli elementi sono in pratica i tag ed hanno la caratteristica di poter contenere al loro interno altri elementi. I nodi di per se sono elementi con attributi e proprietà ma un nodo può essere anche un testo o un attributo stesso che non è a sua volta espandibile e non rientra quindi nella categoria degli elementi.

Per descrivere quindi il codice di esempio: il nodo elemento html ha due figli, head e body, il primo ha un figlio, title, che a sua volta ha un figlio che è un nodo di testo DOM esempio (che non può avere altri figli); il secondo ha un figlio, il primo div, che a sua volta ha due figli, un nodo di testo Questo è un contenitore (che non può avere altri figli) ed un elemento div che a sua volta ha come figlio un nodo di testo Questo è un altro contenitore (che non può avere altri figli).

Tags
Condividi

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …