Les nœuds peuvent être parcourus à l'aide des relations de nœuds.
Navigation DOM Nodes
Accès à des noeuds dans l'arborescence du noeud via la relation entre les nœuds, est souvent appelé "navigating nodes" de "navigating nodes" .
Dans le DOM XML, les relations de noeuds sont définis comme des propriétés aux nœuds:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
L'image suivante illustre une partie de l'arbre de noeud et la relation entre les nœuds books.xml :
DOM - Parent Node
Tous les noeuds ont un noeud exactement parent. Le code suivant navigue vers le noeud parent de <book> :
Exemple
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Essayez - le vous - même » Exemple expliqué:
- Load " books.xml " en xmlDoc
- Obtenez le premier <book> élément
- Sortie le nom de noeud du noeud parent de "x"
Évitez les nœuds de texte vides
Firefox, et quelques autres navigateurs, traiteront vides blancs-espaces ou de nouvelles lignes en tant que nœuds de texte, Internet Explorer ne sera pas.
Cela provoque un problème lors de l'utilisation des propriétés: firstChild, lastChild, nextSibling, previousSibling.
Pour éviter la navigation vers nœuds de texte vides (espaces et de nouvelles lignes de caractères entre les noeuds d'élément), nous utilisons une fonction qui vérifie le type de noeud:
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
La fonction ci - dessus vous permet d'utiliser get_nextSibling( node ) au lieu de la propriété node .nextSibling.
Code a expliqué:
Les noeuds d'élément sont de type 1. Si le nœud frère est pas un nœud d'élément, il se déplace vers les nœuds suivants jusqu'à un noeud d'élément se trouve. De cette façon, le résultat sera le même dans Internet Explorer et Firefox.
Obtenez le premier élément enfant
Le code suivant affiche le premier noeud d'élément du premier <book> :
Exemple
<!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>
Sortie:
title
Essayez - le vous - même » Exemple expliqué:
- Load " books.xml " en xmlDoc
- Utilisez la fonction get_firstChild sur le premier <book> nœud d'élément pour obtenir le premier nœud enfant qui est un nœud d'élément
- Sortie le nom de noeud du premier noeud enfant qui est un nœud d'élément
Autres exemples
lastChild()
Cet exemple utilise la lastChild() méthode et une fonction personnalisée pour obtenir le dernier nœud d'un nœud enfant
nextSibling()
Cet exemple utilise la nextSibling() méthode et une fonction personnalisée pour obtenir le noeud frère suivant d'un noeud
previousSibling()
Cet exemple utilise la previousSibling() méthode et une fonction personnalisée pour obtenir le nœud frère précédent d'un noeud