Nós podem ser navegadas usando relações de nó.
Navegando DOM Nodes
Acessando nós na árvore de nós através da relação entre nós, é muitas vezes chamado "navigating nodes" .
No DOM XML, relações de nó são definidas como propriedades para os nós:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
A imagem a seguir ilustra uma parte da árvore de nós e da relação entre nós em books.xml :
DOM - o nó pai
Todos os nós ter exatamente um nó pai. O código a seguir navega para o nó pai do <book> :
Exemplo
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Tente você mesmo " Exemplo explicou:
- Load " books.xml " em xmlDoc
- Obter o primeiro <book> elemento
- Output o nome do nó do nó pai de "x"
Evite nós de texto vazios
Firefox, e alguns outros navegadores, irá tratá-branco-espaços vazios ou novas linhas como nós de texto, Internet Explorer não.
Isso causa um problema ao usar as propriedades: firstChild, lastChild, NextSibling, PreviousSibling.
Para evitar a navegação para nós de texto vazios (espaços e nova linha de caracteres entre nós de elemento), 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 explicou:
nós de elemento são do tipo 1. Se o nó irmão não é um nó de elemento, passará para os próximos nós até um nó de elemento é encontrado. Desta forma, o resultado será o mesmo no Internet Explorer e Firefox.
Obter o primeiro elemento filho
O código a seguir mostra o primeiro nó elemento do primeiro <book> :
Exemplo
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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
Tente você mesmo " Exemplo explicou:
- Load " books.xml " em xmlDoc
- Use a função get_firstChild na primeira <book> nó de elemento para obter o primeiro nó filho que é um nó de elemento
- Output o nome do nó do primeiro nó filho que é um nó de elemento
mais Exemplos
lastChild()
Este exemplo usa o lastChild() método e uma função personalizada para obter o último nó filho de um nó
nextSibling()
Este exemplo usa o nextSibling() método e uma função personalizada para obter o próximo nó irmão de um nó
previousSibling()
Este exemplo usa o previousSibling() método e uma função personalizada para obter o nó irmão anterior de um nó