Localização de nós DOM XML

Os nós podem ser localizados usando as relações entre nós.

Localização de nós DOM

Acesso aos nós na árvore de nós através das relações entre nós, geralmente chamado de "localização de nós" (ou navegação de nós, navigating nodes).

Nos XML DOM, as relações de nós são definidas como atributos do nó:

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

A figura a seguir mostra books.xml É uma parte da árvore de nós e descreve as relações entre nós:

Árvore de nós DOM

DOM - nó pai

Todos os nós têm apenas um nó pai. O seguinte código navega até o nó pai de <book>:

Exemplo

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

Experimente você mesmo

Explicação do exemplo:

  1. Para books.xml carregado para xmlDoc de
  2. Obter o primeiro elemento <book>
  3. Exibir o nome do nó pai do "x"

Evitar nós de texto vazios

Alguns navegadores podem considerar espaços ou quebras de linha como nós de texto. Isso pode causar problemas ao usar os seguintes atributos:

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Para evitar navegação para nós de texto vazios (espaços e quebras de linha entre elementos), usamos uma função para verificar o tipo do nó:

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

Com a função acima, podemos usar get_nextSibling(node) para substituir a propriedade node.nextSibling.

Explicação do código:

O tipo do nó de elemento é 1. Se o nó同级 não for nó de elemento, mova para o próximo nó até encontrar nó de elemento.

Obter o primeiro elemento filho

O código a seguir mostra o primeiro elemento nó <book> do primeiro elemento filho:

Exemplo

<!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 se o primeiro nó é um nó de elemento
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Experimente você mesmo

Explicação do exemplo:

  1. Para books.xml Carregar no xmlDoc
  2. Usar a função get_firstChild no primeiro elemento nó <book> para obter o primeiro elemento filho
  3. Saída do nome do nó do primeiro elemento filho

Mais exemplos

lastChild()
Usar o método lastChild() e a função personalizada para obter o último filho do nó.
nextSibling()
Use o método nextSibling() e funções personalizadas para obter o nó irmão seguinte do nó.
previousSibling()
Use o método previousSibling() e funções personalizadas para obter o nó irmão anterior do nó.