JavaScript: spazi bianchi nella marcatura e attraversamento del DOM

L'attraversamento del DOM a volte può riservare delle sorprese. Infatti i browser non sempre ignorano gli spazi creati nella marcatura dai ritorni a capo, dalle tabulazioni o dalla semplice pressione del tasto Spazio. Questi caratteri vengono interpretati come nodi di testo. Quindi se cerchiamo i fratelli di un nodo o il primo nodo figlio di un elemento potremmo restare delusi.

Consideriamo la seguente marcatura:

<p id="test">
  <span>Test</span>
</p>

C'è un ritorno a capo, quindi il primo nodo figlio non è span ma #text:

var test = document.getElementById('test'),
	first = test.firstChild;
console.log(first.nodeType == 1); // false

È chiaro che dobbiamo usare la proprietà nodeType per sapere se un nodo è un elemento (1) o testo (3):

var DOM = {
	next: function(element) {
		var n = element.nextSibling;
		if (n !== null && n.nodeType == 1) {
			return n;
		} else {
			return this.next(n);
		}
	},
	nextAll: function(element) {
		var siblings = [];
		while (element.nextSibling) {
			element = element.nextSibling;
			if (element !== null && element.nodeType == 1) {
				siblings.push(element);
			}
		}
		return siblings;
	},
	prev: function(element) {
		var n = element.previousSibling;
		if (n !== null && n.nodeType == 1) {
			return n;
		} else {
			return this.prev(n);
		}
	},
	prevAll: function(element) {
		var siblings = [];
		while (element.previousSibling) {
			element = element.previousSibling;
			if (element !== null && element.nodeType == 1) {
				siblings.push(element);
			}
		}
		return siblings;
	}
};

Il metodo è sempre lo stesso: verifichiamo se il nodo è un elemento e nel caso lo selezioniamo ed operiamo su di esso.