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).
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento