Oltre che accedendo direttamente agli elementi (usando document.getElementById, document.getElementsByTagName, document.getElementsByClassName, document.querySelectorAll o document.querySelector) è anche possibile muoversi attraverso gli elementi dell'albero del DOM.
Per esempio è possibile accedere al nodo genitore (parent) di un dato nodo usando la proprietà parentNode come mostra l'esempio seguente. Sia data la seguente lista:
Le seguenti istruzioni visualizzano "monete", cioè l'id del nodo ul parent di sterlina:
La proprietà firstChild consente l'accesso al primo child di un dato noto parent. Con riferimento alla seguente lista:
il codice seguente visualizza "euro" (cioè l'id del primo child di "monete"):
ATTENZIONE: spazi bianchi o andate a capo all'interno di un elemento sono considerati come nodi di testo. Per questo se la lista fosse stata scritta in questo modo (con un'andata a capo dopo ogni elemento interno):
alert(primoF.id) avrebbe visualizzato undefined (perché non esiste un id dello spazio vuoto).
In modo perfettamente analogo si può usare la proprietà lastChild per accedere all'ultimo child di un dato nodo parent:
Due nodi sibling (fratelli) condividono lo stesso genitore. Le proprietà nextSibling e previousSibling consentono di accedere al precedente e al successivo sibling.
Sempre con riferimento alla solita lista di monete (senza spazi e andate a capo!), il codice seguente visualizza "euro" e "sterlina":
La proprietà childNodes fornisce un array con tutti i nodi figli (child) di un dato nodo. Sempre con riferimento alla lista delle monete, il codice seguente visualizza l'elenco di tutte le monete:
Sito realizzato in base al template offerto da
http://www.graphixmania.it