XML DOM - Navegación

Hasta ahora hemos estudiado la estructura DOM, cómo cargar y analizar el objeto DOM XML y atravesar los objetos DOM. Aquí veremos cómo podemos navegar entre nodos en un objeto DOM. El DOM XML consta de varias propiedades de los nodos que nos ayudan a navegar a través de los nodos, como:

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

A continuación se muestra un diagrama de un árbol de nodos que muestra su relación con los otros nodos.

DOM - Nodo principal

Esta propiedad especifica el nodo padre como un objeto de nodo.

Ejemplo

El siguiente ejemplo (navigate_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML. Luego, el objeto DOM se navega al nodo principal a través del nodo secundario -

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         var y = xmlDoc.getElementsByTagName("Employee")[0];
         document.write(y.parentNode.nodeName);
      </script>
   </body>
</html>

Como puede ver en el ejemplo anterior, el nodo hijo Empleado navega a su nodo padre.

Ejecución

Guarde este archivo como navigate_example.html en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el nodo padre de Empleado , es decir, Compañía .

Primer hijo

Esta propiedad es de tipo Node y representa el primer nombre secundario presente en NodeList.

Ejemplo

El siguiente ejemplo (first_node_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML, luego navega al primer nodo secundario presente en el objeto DOM.

<!DOCTYPE html>
<html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_firstChild(p) {
            a = p.firstChild;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(firstchild.nodeName);
      </script>
   </body>
</html>

La función get_firstChild (p) se usa para evitar los nodos vacíos. Ayuda a obtener el elemento firstChild de la lista de nodos.
x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0])obtiene el primer nodo hijo para el nombre de etiqueta Empleado .

Ejecución

Guarde este archivo como first_node_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el primer nodo hijo de Empleado, es decir, Nombre .

Último niño

Esta propiedad es de tipo Node y representa el último nombre secundario presente en NodeList.

Ejemplo

El siguiente ejemplo (last_node_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML, luego navega hasta el último nodo hijo presente en el objeto DOM xml.

<!DOCTYPE html>
  <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_lastChild(p) {
            a = p.lastChild;

            while (a.nodeType != 1){
               a = a.previousSibling;
            }
            return a;
         }
         var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
         document.write(lastchild.nodeName);
      </script>
   </body>
</html>

Ejecución

Guarde este archivo como last_node_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el último nodo secundario de Empleado, es decir, Correo electrónico .

Proximo hermano

Esta propiedad es de tipo Node y representa el siguiente hijo, es decir, el siguiente hermano del elemento hijo especificado presente en NodeList.

Ejemplo

El siguiente ejemplo (nextSibling_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML que navega inmediatamente al siguiente nodo presente en el documento xml.

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         }
         else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_nextSibling(p) {
            a = p.nextSibling;

            while (a.nodeType != 1) {
               a = a.nextSibling;
            }
            return a;
         }
         var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
         document.write(nextsibling.nodeName);
      </script>
   </body>
</html>

Ejecución

Guarde este archivo como nextSibling_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el siguiente nodo hermano de FirstName, es decir, LastName .

Hermano anterior

Esta propiedad es de tipo Node y representa el hijo anterior, es decir, el hermano anterior del elemento hijo especificado presente en NodeList.

Ejemplo

El siguiente ejemplo (previoussibling_example.htm) analiza un documento XML ( node.xml ) en un objeto DOM XML, luego navega por el nodo anterior del último nodo secundario presente en el documento xml.

<!DOCTYPE html>
   <body>
      <script>
         if (window.XMLHttpRequest)
         {
            xmlhttp = new XMLHttpRequest();
         } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET","/dom/node.xml",false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;

         function get_previousSibling(p) {
            a = p.previousSibling;

            while (a.nodeType != 1) {
               a = a.previousSibling;
            }
            return a;
         }

         prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
         document.write(prevsibling.nodeName);
      </script>
   </body>
</html>

Ejecución

Guarde este archivo como previoussibling_example.htm en la ruta del servidor (este archivo y node.xml deben estar en la misma ruta en su servidor). En la salida, obtenemos el nodo hermano anterior de Correo electrónico, es decir, ContactNo .

↰ Previous page Next page ↱