JavaScript: attraversamento ricorsivo del DOM

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: