Navigare i nodi del DOM

Alcuni metodi del DOM ci consentono di analizzare e muoverci all'interno della struttura di un documento. Ad esempio, la proprietà childNodes di un elemento contiene l'elenco dei nodi figli dell'elemento sotto forma di NodeList. Consideriamo ad esempio il seguente codice HTML:

<div id="mainDiv">
	<h1>Titolo</h1>
	<p>Un paragrafo</p>
	<p>Un altro paragrafo</p>
</div>

Possiamo scoprire il contenuto degli elementi figli del <div> principale utilizzando il seguente codice JavaScript:

var div = document.getElementById("mainDiv");
for (var i = 0; i < div.childNodes.length; i++) {
	console.log(div.childNodes[i].innerHTML);
}

Sono previsti dei metodi per semplificare la navigazione tra i nodi figlio evitando di ricorrere ad un ciclo. Tra questi segnaliamo i metodi firstChild() e lastChild() che restituiscono rispettivamente il primo figlio e l'ultimo figlio di un elemento.

Il metodo parentNode() restituisce il nodo genitore dell'elemento corrente, permettendoci di risalire la struttura gerarchica dell'albero del DOM.

La navigazione del DOM può avvenire non solo verticalmente , analizzando i figli ed il genitore di un elemento, ma anche allo stesso livello dell'albero, scoprendo quali sono i nodi fratelli dell'elemento corrente. Ad esempio, i metodi nextSibling() e previousSibling() restituiscono il nodo fratello successivo e precedente nella struttura del DOM.

Non è previsto un metodo per ottenere tutti i fratelli del nodo corrente, ma è possibile aggirare il problema utilizzando il seguente codice JavaScript:

var me = document.getElementById("mainDiv");
var allSiblings = me.parentNode.childNodes;
var mySiblings = [];
for (i = 0; i < allSiblings.length; i++) {
	if (allSiblings[i] !== me) {
		mySiblings.push(allSiblings[i]);
	}
}

Cicli con l'oggetto Array e la funzione forEach

Volendo possiamo scorrere gli elementi sfruttando la funzione forEach del prototipo di Array (Array.prototype.forEach.call o più semplicemente [].forEach.call), ecco lo stesso esempio riprodotto utilizzando forEach:

var me = document.getElementById("mainDiv");
var allSiblings = me.parentNode.childNodes;
var mySiblings = [];
[].forEach.call(allSiblings, function(el) {
	if (el !== me) mySiblings.push(el);
});