La proprietà nextSibling di Javascript

Nel linguaggio Javascript, la proprietà nextSibling appartiene al Document Object Model (DOM) e svolge un ruolo importante nella manipolazione degli elementi della pagina.

nextSibling

Questa proprietà è incaricata di selezionare il nodo successivo allo stesso livello del nodo corrente nell'albero del DOM.

Un nodo, in questo contesto, può essere rappresentato sia da un elemento HTML che da un semplice testo o altri tipi di nodi all'interno del DOM.

Ecco un esempio pratico con un documento HTML:

<html>
<body>
<div>
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p id="terzo">Paragrafo 3</p><b>Test</b>
</div>
<script>
var terzoParagrafo = document.getElementById("terzo");
var nodoSuccessivo = terzoParagrafo.nextSibling;
document.write(nodoSuccessivo);
document.write(nodoSuccessivo.tagName);
</script>
</body>
</html>

Lo script localizza l'elemento con id="terzo" e identifica il nodo successivo nel codice.

Se considero il terzo paragrafo (`<p>Paragrafo 3</p>`) come nostro punto di riferimento, il nodo successivo sarà l'elemento che lo segue direttamente nell'HTML. In questo caso si tratta del tag <b>.

Di conseguenza, lo script restituirà [object HTMLElement] e il nome del tag, se presente.

[object HTMLElement]
B

È fondamentale ricordare che spazi bianchi o ritorni a capo nel codice HTML possono influenzare la selezione del nodo successivo con nextSibling.

Se, ad esempio, inserisco uno spazio o un ritorno a capo dopo il paragrafo con la classe id="terzo", la situazione cambia radicalmente:

<html>
<body>
<div>
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<b>Test</b>
<p id="terzo">Paragrafo 3</p>
<b>Test</b>
</div>
<script>
var terzoParagrafo = document.getElementById("terzo");
var nodoSuccessivo = terzoParagrafo.nextSibling;
document.write(nodoSuccessivo);
document.write(nodoSuccessivo.tagName);
</script>
</body>
</html>

In questo caso, il nodo successivo è un nodo di testo ovvero il ritorno a capo.

Quindi, il risultato in output è [object Text] e un tipo "undefined" perché non segue un altro tag HTML.

[object Text]
undefined

Pertanto, bisogna fare particolarmente attenzione agli spazi in bianco e ai ritorni a capo quando si utilizza nextSibling.

E così via.