JavaScript: lo spazio bianco nel 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:


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


const DOM = {
	next(element) {
		const n = element.nextSibling;
		if (n === null || n.nodeType !== 1) {
			return this.next(n);
		}
        return n;
	},
	nextAll(element) {
		const siblings = [];
		while (element.nextSibling) {
			element = element.nextSibling;
			if (element !== null && element.nodeType === 1) {
				siblings.push(element);
			}
		}
		return siblings;
	},
	prev(element) {
		const n = element.previousSibling;
		if (n === null || n.nodeType !== 1) {
            return this.prev(n);
		}
        return n;
	},
	prevAll(element) {
		const 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.

L'alternativa all'attraversamento progressivo è quella di usare le proprietà nextElementSibling e previousElementSibling, che selezionano sempre un nodo di tipo 1, ossia un nodo elemento.

Torna su