XML DOM - Nœuds de navigation
Les nœuds peuvent être parcourus à l'aide de relations de nœuds.
Naviguer dans les nœuds DOM
L'accès aux nœuds dans l'arborescence des nœuds via la relation entre les nœuds est souvent appelé "nœuds de navigation".
Dans le DOM XML, les relations entre les nœuds sont définies comme des propriétés des nœuds :
- parentNode
- childNodes
- premier enfant
- dernier enfant
- nextSibling
- previousSibling
L'image suivante illustre une partie de l'arborescence des nœuds et la relation entre les nœuds dans books.xml :
DOM - Nœud parent
Tous les nœuds ont exactement un nœud parent. Le code suivant accède au nœud parent de <book> :
Exemple
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
Exemple expliqué :
- Charger " livres.xml " dans xmlDoc
- Obtenir le premier élément <book>
- Afficher le nom de nœud du nœud parent de "x"
Évitez les nœuds de texte vides
Firefox et certains autres navigateurs traiteront les espaces vides ou les nouvelles lignes comme des nœuds de texte, contrairement à Internet Explorer.
Cela pose un problème lors de l'utilisation des propriétés : firstChild, lastChild, nextSibling, previousSibling.
Pour éviter de naviguer vers des nœuds de texte vides (espaces et caractères de nouvelle ligne entre les nœuds d'élément), nous utilisons une fonction qui vérifie le type de nœud :
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 du nœud de propriété .nextSibling.
Code expliqué :
Les nœuds d'élément sont de type 1. Si le nœud frère n'est pas un nœud d'élément, il passe aux nœuds suivants jusqu'à ce qu'un nœud d'élément soit trouvé. De cette façon, le résultat sera le même dans Internet Explorer et Firefox.
Obtenir le premier élément enfant
Le code suivant affiche le premier nœud d'élément du premier <book> :
Exemple
<!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>
Sortir:
title
Exemple expliqué :
- Charger " livres.xml " dans xmlDoc
- Utilisez la fonction get_firstChild sur le premier nœud d'élément <book> pour obtenir le premier nœud enfant qui est un nœud d'élément
- Afficher le nom de nœud du premier nœud enfant qui est un nœud d'élément
Plus d'exemples
Cet exemple utilise la méthode lastChild() et une fonction personnalisée pour obtenir le dernier nœud enfant d'un nœud
Cet exemple utilise la méthode nextSibling() et une fonction personnalisée pour obtenir le nœud frère suivant d'un nœud
Cet exemple utilise la méthode previousSibling() et une fonction personnalisée pour obtenir le nœud frère précédent d'un nœud