Localizar nodos DOM XML

Se puede ubicar un nodo utilizando las relaciones entre los nodos.

Ubicar nodos DOM

Acceder a los nodos en el árbol de nodos mediante las relaciones entre los nodos, generalmente llamado "ubicar nodo" (o navegar nodos, navigating nodes).

En XML DOM, las relaciones de nodo se definen como propiedades del nodo:

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

La siguiente imagen muestra books.xml Es parte de la estructura de árbol de nodos y explica las relaciones entre los nodos:

Árbol de nodos DOM

Nodo padre en DOM

Todos los nodos tienen solo un nodo padre. El siguiente código navega 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 de explicación:

  1. Convertir books.xml cargado a xmlDoc en
  2. Obtener el primer elemento <book>
  3. Mostrar el nombre del nodo del padre del "x"

Evitar nodos de texto vacíos

Algunos navegadores pueden considerar espacios en blanco o saltos de línea como nodos de texto. Esto puede causar problemas al usar las siguientes propiedades:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Para evitar navegar a nodos de texto vacíos (espacios en blanco y saltos de línea entre nodos de elemento), utilizamos una función para verificar el tipo de nodo:

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

Con la función anterior, podemos usar get_nextSibling(node) en lugar de la propiedad node.nextSibling.

Explicación del código:

El tipo de nodo del elemento es 1. Si el nodo同级 no es un nodo de elemento, se mueve al siguiente nodo hasta encontrar un nodo de elemento.

Obtener el primer elemento hijo

El siguiente código muestra el primer elemento <book> del primer elemento:

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;
}
// Verificar si el primer nodo es un nodo de elemento
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Inténtalo tú mismo

Ejemplo de explicación:

  1. Convertir books.xml Cargar en xmlDoc
  2. Usar la función get_firstChild en el primer elemento <book> para obtener el primer elemento hijo
  3. Escribir el nombre del primer elemento hijo del nodo

Más ejemplos

lastChild()
Utilice el método lastChild() y las funciones personalizadas para obtener el último hijo del nodo.
nextSibling()
Usar el método nextSibling() y funciones personalizadas para obtener el nodo hermano siguiente del nodo.
previousSibling()
Usar el método previousSibling() y funciones personalizadas para obtener el nodo hermano anterior del nodo.