XML DOM - Nós de navegação
Os nós podem ser navegados usando relacionamentos de nós.
Navegando nos nós DOM
O acesso aos nós na árvore de nós por meio do relacionamento entre os nós é frequentemente chamado de "nós de navegação".
No XML DOM, os relacionamentos de nós são definidos como propriedades para os nós:
- parentNode
- childNodes
- primeiro filho
- último filho
- próximoIrmão
- anteriorIrmão
A imagem a seguir ilustra uma parte da árvore de nós e o relacionamento entre nós em books.xml :
DOM - Nó pai
Todos os nós têm exatamente um nó pai. O código a seguir navega para 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;
}
Exemplo explicado:
- Carregar " books.xml " em xmlDoc
- Obtenha o primeiro elemento <book>
- Emita o nome do nó do nó pai de "x"
Evite nós de texto vazios
O Firefox e alguns outros navegadores tratarão espaços em branco vazios ou novas linhas como nós de texto, o Internet Explorer não.
Isso causa um problema ao usar as propriedades: firstChild, lastChild, nextSibling, previousSibling.
Para evitar navegar para nós de texto vazios (espaços e caracteres de nova linha entre nós de elementos), usamos uma função que verifica o tipo de nó:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
A função acima permite que você use get_nextSibling( node ) em vez da propriedade node .nextSibling.
Código explicado:
Os nós de elemento são do tipo 1. Se o nó irmão não for um nó de elemento, ele se move para os próximos nós até que um nó de elemento seja encontrado. Dessa forma, o resultado será o mesmo tanto no Internet Explorer quanto no Firefox.
Obtenha o primeiro elemento filho
O código a seguir exibe o primeiro nó de elemento do primeiro <book>:
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;
}
//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>
Saída:
title
Exemplo explicado:
- Carregar " books.xml " em xmlDoc
- Use a função get_firstChild no primeiro nó do elemento <book> para obter o primeiro nó filho que é um nó do elemento
- Emita o nome do nó do primeiro nó filho que é um nó de elemento
Mais exemplos
Este exemplo usa o método lastChild() e uma função personalizada para obter o último nó filho de um nó
Este exemplo usa o método nextSibling() e uma função personalizada para obter o próximo nó irmão de um nó
Este exemplo usa o método previousSibling() e uma função personalizada para obter o nó irmão anterior de um nó