PROGRAMMIAMO
JS - Spostarsi attraverso il DOM
Accedere al nodo parent con parentNode

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:

<ul id="monete">
<li id="euro">Euro</li>
<li id="dollaro">Dollaro</li>
<li id="sterlina">Sterlina</li>
</ul>

Le seguenti istruzioni visualizzano "monete", cioè l'id del nodo ul parent di sterlina:

var sterlina = document.getElementById("sterlina");
var genitore = sterlina.parentNode;
alert (genitore.id);

 

Accedere al primo e all'ultimo child con firstChild e lastChild

La proprietà firstChild consente l'accesso al primo child di un dato noto parent. Con riferimento alla seguente lista:

<ul id="monete"><li id="euro">Euro</li><li id="dollaro">Dollaro</li><li id="sterlina">Sterlina</li></ul>

il codice seguente visualizza "euro" (cioè l'id del primo child di "monete"):

var monete = document.getElementById("monete");
var primoF = monete.firstChild;
alert (primoF.id); //visualizza "euro"

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):

<ul id="monete">
<li id="euro">Euro</li>
<li id="dollaro">Dollaro</li>
<li id="sterlina">Sterlina</li>
</ul>

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:

var monete = document.getElementById("monete");
var ultimoF = monete.lastChild;
alert (ultimoF.id); //visualizza "sterlina"

 

Accedere ai sibling con nextSibling e previousSibling

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":

 var dollaro = document.getElementById("dollaro");
var prev = dollaro.previousSibling.innerHTML;
var next = dollaro.nextSibling.innerHTML;
alert(prev); //visualizza "euro"
alert(next); // visualizza "sterlina"

 

Accedere a tutti i nodi child di un dato nodo con childNodes

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:

 var monete = document.getElementById("monete");

for (i=0;i<monete.childNodes.length; i++)
    alert(monete.childNodes[i].innerHTML);

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it