6 - Accediendo a un nodo de texto de una marca HTML (childNodes - nodeValue)


Es importante notar que el texto contenido en una marca no pertenece al nodo, sino que se encuentra en otro nodo especial que lo llamaremos nodo texto.



En esta árbol de nodos podemos identificar que todos los rectángulos que no tienen bordes redondeados son nodos texto.
Ahora para acceder a dichos nodos podemos hacerlo a partir del nodo padre con la propiedad childNodes.

El siguiente ejemplo cambia el texto que contiene una marca h1 accediendo al nodo de texto.

El archivo pagina1.html es:
<html>
<head>
<title>Problema</title>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<h1 id="titulo">Este es el título original</h1> 
<input type="button" value="Cambiar Texto" onClick="cambiarTexto()">
</body>
</html>
El archivo funciones.js es:
function cambiarTexto()
{
  var tit=document.getElementById('titulo');
  tit.childNodes[0].nodeValue='Ahora vemos el nuevo título';
}

Como ya hemos visto rescatamos la referencia a la marca h1 por medio de la función getElementById, luego mediante la propiedad childNodes accedemos a la primer componente que tiene la referencia al nodo de tipo texto. Por último asignamos el nuevo texto a la propiedad nodeValue.