Los nodos pueden ser navegados utilizando relaciones de nodo.
Navegando DOM Nodos
El acceso a los nodos en el árbol de nodos a través de la relación entre los nodos, a menudo se llama "navigating nodes" .
En el DOM XML, las relaciones de nodo se definen como propiedades de los nodos:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
La siguiente imagen ilustra una parte del árbol de nodos y la relación entre los nodos de books.xml :
DOM - Nodo parental
Todos los nodos tienen exactamente un nodo padre. El siguiente código se desplaza al nodo padre de <book> :
Ejemplo
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Inténtalo tú mismo " Ejemplo explicó:
- Cargar " books.xml " en xmlDoc
- Obtener el primer <book> elemento
- Salida el nombre de nodo del nodo padre de la "x"
Evitar nodos de texto vacíos
Firefox y otros navegadores, tratarán vacíos espacios en blanco o nuevas líneas como nodos de texto, Internet Explorer no lo hará.
Esto causa un problema cuando se utilizan las propiedades: firstChild, lastChild, nextSibling, previousSibling.
Para evitar la navegación hacia los nodos de texto vacíos (espacios y nuevas líneas caracteres entre nodos de elemento), se utiliza una función que comprueba el tipo de nodo:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
La función anterior le permite utilizar get_nextSibling( node ) en lugar de la propiedad node .nextSibling.
Código explicó:
Los nodos de elementos son de tipo 1. Si el nodo relacionado no es un nodo elemento, se mueve al siguiente nodo hasta que se encuentre un nodo elemento. De esta manera, el resultado será el mismo tanto en Internet Explorer y Firefox.
Obtener el primer elemento de Niños
El código siguiente muestra el primer nodo de elemento de la primera <book> :
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET",
"books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
Salida:
title
Inténtalo tú mismo " Ejemplo explicó:
- Cargar " books.xml " en xmlDoc
- Utilice la función get_firstChild en el primer <book> nodo de elemento para obtener el primer nodo hijo que es un nodo elemento
- Salida el nombre de nodo del primer nodo hijo que es un nodo elemento
Más ejemplos
lastChild()
En este ejemplo se utiliza el lastChild() método y una función personalizada para obtener el último nodo hijo de un nodo
nextSibling()
En este ejemplo se utiliza el nextSibling() método y una función personalizada para obtener el siguiente nodo del mismo nivel de un nodo
previousSibling()
En este ejemplo se utiliza el previousSibling() método y una función personalizada para obtener el nodo secundario anterior de un nodo