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 peppe,
che tipo di errore ti dà? Hai verificato se il resto delle caratteristiche è …

peppe

Ciao, perchè non posso unire takeshy kurosawa con takeshy kurosawa shop? non sono nomi simili?

Michele Pisani

Grazie Ottavia, fa sempre piacere ricevere un feedback. Buon proseguimento.

Ottavia Neruda

La tua guida mi è stata utilissima. L'ho trovata semplice, ben fatta ed intuitiva. Grazie.