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

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …