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

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

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

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 Erika, in questo caso è sicuramente condizione essenziale che le due pagine vengano associate …

Erika

Buonasera Michele, a me appare l'errore che fanno parte di account business diversi; come posso …

Giulia

Buonasera Michele, ho lo stesso identico problema di Giuseppe. Inoltre non ho nessuna possibilità …

Giuseppe

Sto provando da diversi mesi ad unire due pagine. Faccio tutta la procedura correttamente e alla …