La proprietà previousSibling di Javascript

Nel linguaggio javascript previousSibling è una proprietà che fa parte del Document Object Model (DOM)

previousSibling

Questa proprietà restituisce il nodo immediatamente precedente al nodo attuale nello stesso livello dell'albero del DOM.

Dove in questo contesto un nodo può essere un elemento, come un tag HTML, ma anche un nodo di testo, o qualsiasi altro tipo di nodo nel DOM.

Ad esempio, considero questo documento HTML

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

Questo script individua l'oggetto con id=terzo e restituisce il nodo immediatamente precedente.

In questo caso l'oggetto con l'id cercato è il terzo paragrafo (`<p>Paragrafo 3</p>`) e il nodo precedente è il nodo <b>Test</b>.

Quindi, lo script restituisce [object HTMLElement] e come tag name "B"

[object HTMLElement]
B

Tuttavia, è importante notare che se c'è spazio bianco, come un ritorno a capo o spazi tra i tag HTML nel codice sorgente, previousSibling potrebbe invece riferirsi al nodo di testo che contiene quello spazio bianco.

Ad esempio, inserisco un ritorno a capo dopo <b>Test</b>

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

Dopo questa semplice modifica, lo stesso script rileva come nodo precedente il nodo di testo, restituendo [object Text] e come tipo "undefined"

[object Text]
undefined

Questo comportamento sottolinea come gli spazi bianchi e i ritorni a capo nel codice HTML possono influenzare la navigazione tra i nodi con JavaScript.

E così via.