DOM XML - Navegação

Até agora, estudamos a estrutura DOM, como carregar e analisar o objeto XML DOM e percorrer os objetos DOM. Aqui, veremos como podemos navegar entre os nós em um objeto DOM. O XML DOM consiste em várias propriedades dos nós que nos ajudam a navegar pelos nós, como -

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

A seguir está um diagrama de uma árvore de nós mostrando seu relacionamento com os outros nós.

DOM - Nó Pai

Esta propriedade especifica o nó pai como um objeto de nó.

Exemplo

O exemplo a seguir (navigate_example.htm) analisa um documento XML ( node.xml ) em um objeto XML DOM. Em seguida, o objeto DOM é navegado para o nó pai através do nó filho -

<!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 você pode ver no exemplo acima, o nó filho Employee navega para seu nó pai.

Execução

Salve este arquivo como navigate_example.html no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Na saída, obtemos o nó pai de Employee , ou seja, Company .

Primeiro filho

Esta propriedade é do tipo Node e representa o primeiro nome filho presente na NodeList.

Exemplo

O exemplo a seguir (first_node_example.htm) analisa um documento XML ( node.xml ) em um objeto XML DOM e, em seguida, navega para o primeiro nó filho presente no 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>

A função get_firstChild (p) é usada para evitar os nós vazios. Ajuda a obter o elemento firstChild da lista de nós.
x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0])busca o primeiro nó filho para o nome da marca Employee .

Execução

Salve este arquivo como first_node_example.htm no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Na saída, obtemos o primeiro nó filho de Employee, ou seja, FirstName .

Último filho

Esta propriedade é do tipo Node e representa o último nome do filho presente na NodeList.

Exemplo

O exemplo a seguir (last_node_example.htm) analisa um documento XML ( node.xml ) em um objeto XML DOM e, a seguir, navega até o último nó filho presente no objeto xml DOM.

<!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>

Execução

Salve este arquivo como last_node_example.htm no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Na saída, obtemos o último nó filho de Employee, ou seja, Email .

Próximo irmão

Esta propriedade é do tipo Node e representa o próximo filho, ou seja, o próximo irmão do elemento filho especificado presente na NodeList.

Exemplo

O exemplo a seguir (nextSibling_example.htm) analisa um documento XML ( node.xml ) em um objeto XML DOM que navega imediatamente para o próximo nó presente no 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>

Execução

Salve este arquivo como nextSibling_example.htm no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Na saída, obtemos o próximo nó irmão de FirstName, ou seja, LastName .

Irmão anterior

Esta propriedade é do tipo Node e representa o filho anterior, ou seja, o irmão anterior do elemento filho especificado presente na NodeList.

Exemplo

O exemplo a seguir (previoussibling_example.htm) analisa um documento XML ( node.xml ) em um objeto XML DOM e, em seguida, navega no nó anterior do último nó filho presente no 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>

Execução

Salve este arquivo como previoussibling_example.htm no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Na saída, obtemos o nó irmão anterior de Email, ou seja, ContactNo .