La proprietà nodeValue in Javascript

Nel linguaggio Javascript la proprietà nodeValue mi permette di ottenere o impostare il valore del testo di un nodo nel DOM di una pagina web.

nodeValue

È una proprietà molto utile quando si lavora con il testo in JavaScript.

Tuttavia, ha senso usarla solo per certi tipi di nodi, perché non tutti i nodi hanno un nodeValue significativo.

E' rilevante principalmente per i nodi di tipo testo (text nodes).

Cos'è il DOM? In JavaScript esiste un concetto chiamato Document Object Model (DOM) che permette di interagire con la struttura del documento. Il DOM rappresenta la pagina web come un albero di "nodi", come un grande albero con molti rami e foglie. Ogni parte di questa pagina, come testo, immagini, o qualsiasi altro elemento, è come una piccola parte di questo albero.

Ecco un esempio semplice di utilizzo.

Considero questa pagina HTML

<html>
<body>
<p>Esempio</p>
<p id="esempio">Ciao mondo!</p>
<script>
var nodoParagrafo = document.getElementById("esempio");
var nodoTesto = nodoParagrafo.firstChild;
var testo = nodoTesto.nodeValue;
document.write("Il nodo contiene: "+testo);
</script>
</body>
</html>

Questo script cerca il paragrafo con id=esempio nel DOM tramite il metodo document.getElementById("esempio") e lo assegna all'oggetto nodoParagrafo.

Poi legge il primo nodo di testo che si trova nel paragrafo tramite la proprietà firstChild.

Infine, utilizza la proprietà nodeValue su quest'ultimo per accedere al testo del nodo. In questo caso, il contenuto del nodo è "Ciao Mondo!".

Il risultato in output nella pagina web è il seguente:

Esempio
Ciao mondo!
Il nodo contiene: Ciao mondo!

Esempio 2

Come già anticipato, posso usare questa proprietà anche per modificare il contenuto testuale del nodo.

Ecco un esempio pratico.

<html>
<body>
<p>Esempio</p>
<p id="esempio">Ciao mondo!</p>
<script>
var nodoParagrafo = document.getElementById("esempio");
var nodoTesto = nodoParagrafo.firstChild;
nodoTesto.nodeValue = "Hello World!";
</script>
</body>
</html>

In questo caso, dopo aver individuato il nodo di testo, lo script modifica il suo contenuto testuale da "Ciao mondo!" a "Hello World!"

Esempio
Hello World!

E così via.