XML DOM - Nodos de navegación
Los nodos se pueden navegar usando relaciones de nodo.
Navegación por nodos DOM
Acceder a los nodos en el árbol de nodos a través de la relación entre nodos, a menudo se denomina "nodos de navegación".
En el DOM XML, las relaciones de los nodos se definen como propiedades de los nodos:
- padreNodo
- childNodes
- primer hijo
- último niño
- proximo hermano
- anteriorhermano
La siguiente imagen ilustra una parte del árbol de nodos y la relación entre nodos en books.xml :
DOM - Nodo principal
Todos los nodos tienen exactamente un nodo principal. El siguiente código navega al nodo principal de <libro>:
Ejemplo
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Ejemplo explicado:
- Cargue " books.xml " en xmlDoc
- Obtener el primer elemento <libro>
- Muestra el nombre del nodo del nodo principal de "x"
Evite los nodos de texto vacíos
Firefox y algunos otros navegadores tratarán los espacios en blanco vacíos o las líneas nuevas como nodos de texto, Internet Explorer no lo hará.
Esto causa un problema al usar las propiedades: firstChild, lastChild, nextSibling, previousSibling.
Para evitar navegar a nodos de texto vacíos (espacios y caracteres de nueva línea entre nodos de elementos), usamos una función que verifica 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 usar get_nextSibling( nodo ) en lugar del nodo de propiedad .nextSibling.
Código explicado:
Los nodos de elemento son de tipo 1. Si el nodo hermano no es un nodo de elemento, se mueve a los siguientes nodos hasta que se encuentra un nodo de elemento. De esta forma, el resultado será el mismo tanto en Internet Explorer como en Firefox.
Obtener el primer elemento secundario
El siguiente código muestra el primer nodo de elemento del primer <libro>:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
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>
Producción:
title
Ejemplo explicado:
- Cargue " books.xml " en xmlDoc
- Use la función get_firstChild en el primer nodo del elemento <libro> para obtener el primer nodo secundario que es un nodo del elemento
- Muestra el nombre de nodo del primer nodo secundario que es un nodo de elemento
Más ejemplos
Este ejemplo usa el método lastChild() y una función personalizada para obtener el último nodo secundario de un nodo
Este ejemplo usa el método nextSibling() y una función personalizada para obtener el siguiente nodo hermano de un nodo
Este ejemplo utiliza el método anteriorSibling() y una función personalizada para obtener el nodo hermano anterior de un nodo