 |
Accediendo a un nodo hermano (nextSibling y previousSibling)
Propiedad nextSibling
La propiedad nodeValue establece o devuelve el valor de nodo del nodo especificado, si el nodo es un nodo de elemento, la propiedad nodeValue devolverá nulo.
Nota: Si desea devolver el texto de un elemento, recuerde que el texto siempre está dentro de un nodo Text y deberá devolver el valor del nodo Text (element.childNodes [0] .nodeValue). Para otros tipos de nodos, la propiedad nodeValue devolverá diferentes valores para diferentes tipos de nodos.
Consejo: una alternativa a la propiedad nodeValue puede ser la propiedad textContent
<!DOCTYPE html>
<html>
<body>
<p>Listado de Ejemplo:</p>
<ul><li id="item1">Cafe (Primer li)</li><li id="item2">Te (segundo li)</li></ul>
<p>Haga click en el botón para obtener el contenido HTML del siguiente hermano del primer elemento de la lista..</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Nota:</strong> Los espacios en blanco dentro de los elementos se consideran texto y texto
se considera como nodos.</p>
<p>Si agrega espacios en blanco entre los dos elementos li, el resultado será "indefinido"..</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Si tenemos la referencia de un nodo podemos fácilmente acceder a los otros nodos que se encuentran en la misma altura dentro del árbol que genera el DOM.
Veamos con un ejemplo como obtenemos la referencia de los nodos hermanos, implementaremos una página que contenga tres párrafos y sólo disponemos el id del primero de ellos.
pagina.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function proximoParrafo()
{
var puntero1=document.getElementById('parrafo1');
while (puntero1!=null)
{
if (puntero1.nodeType==Node.ELEMENT_NODE)
alert(puntero1.childNodes[0].nodeValue);
puntero1=puntero1.nextSibling;
}
}
</script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div>
<p id="parrafo1">Este es el primer párrafo</p>
<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>
</div>
<input type="button" value="accediendo a los tres párrafos" onClick="proximoParrafo()">
</body>
</html>
El código javascript es :
function proximoParrafo(){
var puntero1=document.getElementById('parrafo1');
while (puntero1!=null)
{
if (puntero1.nodeType==Node.ELEMENT_NODE)
alert(puntero1.childNodes[0].nodeValue);
puntero1=puntero1.nextSibling;
}
}
La propiedad nextSibling retorna la referencia del nodo hermano que se encuentra inmediatamente más abajo en el archivo HTML, pero a la misma altura si lo pensamos al archivo HTML como un árbol. También existe una propiedad llamado previusSibling que retorna la referencia del nodo hermano que se encuentra inmediatamente más arriba en el archivo HTML.
nextSibling y previusSibling retornan null en caso de no existir más nodos en dicho nivel.
Recordar:Algo muy importante que hay que tener en cuenta es que si hay un salto de línea entre dos párrafos lo interpreta y crea un nodo de texto.
Ahora entonces para poder recorrer la lista de nodos hermanos podemos disponer una estructura repetitiva y avanzar por la lista. Mediante un if verificamos si se trata de un nodo de tipo elemento y procedemos a acceder a su nodo hijo que contiene el valor del texto del párrafo:
var puntero1=document.getElementById('parrafo1');
while (puntero1!=null)
{
if (puntero1.nodeType==Node.ELEMENT_NODE)
alert(puntero1.childNodes[0].nodeValue);
puntero1=puntero1.nextSibling;
}