Allo stadio attuale del supporto JavaScript, alcuni browser ancora non supportano correttamente i metodi e le proprietà per l'attraversamento del DOM (chiamati walker). Possiamo simulare il loro comportamento con una funzione JavaScript che attraversa tutti i nodi discendenti di un dato elemento.
La funzione è la seguente:
function walk(node, callback) {
var skip, tmp;
var depth = 0;
do {
if ( !skip ) {
skip = callback.call(node, depth) === false;
}
if ( !skip && (tmp = node.firstChild) ) {
depth++;
} else if ( tmp = node.nextSibling ) {
skip = false;
} else {
tmp = node.parentNode;
depth--;
skip = true;
}
node = tmp;
} while ( depth > 0 );
}
La funzione attraversa tutti i nodi di un elemento e fa in modo di non processare due volte lo stesso nodo. Essa si basa sulle proprietà firstChild e nextSibling. Data la seguente struttura:
<ul id="test">
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C1</li>
<li>C2</li>
</ul>
</li>
<li>
D
<ul>
<li>D1</li>
<li>D2
<ul>
<li>D2.1</li>
<li>D2.2</li>
</ul>
</li>
</ul>
</li>
</ul>
possiamo usare la funzione in questo modo:
window.onload = function() {
var node = document.getElementById('test');
walk(node, function() {
if(this.nodeType == 1) {
console.log(this.tagName + '-' + ' ' + this.firstChild.nodeValue);
}
});
};
La funzione restituirà il seguente output nella console:
