DOM XML - Navigation
Jusqu'à présent, nous avons étudié la structure DOM, comment charger et analyser un objet DOM XML et parcourir les objets DOM. Ici, nous allons voir comment nous pouvons naviguer entre les nœuds dans un objet DOM. Le DOM XML se compose de diverses propriétés des nœuds qui nous aident à naviguer à travers les nœuds, telles que -
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
Voici un diagramme d'une arborescence de nœuds montrant sa relation avec les autres nœuds.
DOM - Nœud parent
Cette propriété spécifie le nœud parent en tant qu'objet nœud.
Exemple
L'exemple suivant (navigate_example.htm) analyse un document XML ( node.xml ) dans un objet DOM XML. Ensuite, l'objet DOM est dirigé vers le nœud parent via le nœud enfant -
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var y = xmlDoc.getElementsByTagName("Employee")[0];
document.write(y.parentNode.nodeName);
</script>
</body>
</html>Comme vous pouvez le voir dans l'exemple ci-dessus, le nœud enfant Employee accède à son nœud parent.
Exécution
Enregistrez ce fichier sous le nom navigate_example.html sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Dans la sortie, nous obtenons le nœud parent de Employee , c'est-à-dire Company .
Premier enfant
Cette propriété est de type Node et représente le premier nom enfant présent dans NodeList.
Exemple
L'exemple suivant (first_node_example.htm) analyse un document XML ( node.xml ) dans un objet DOM XML, puis accède au premier nœud enfant présent dans l'objet DOM.
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_firstChild(p) {
a = p.firstChild;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(firstchild.nodeName);
</script>
</body>
</html>La fonction get_firstChild (p) est utilisée pour éviter les nœuds vides. Cela aide à obtenir l'élément firstChild de la liste des nœuds.
x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0])récupère le premier nœud enfant pour le nom de balise Employee .
Exécution
Enregistrez ce fichier en tant que first_node_example.htm sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Dans la sortie, nous obtenons le premier nœud enfant de Employee, c'est-à-dire FirstName .
Dernier enfant
Cette propriété est de type Node et représente le dernier nom d'enfant présent dans NodeList.
Exemple
L'exemple suivant (last_node_example.htm) analyse un document XML ( node.xml ) dans un objet DOM XML, puis accède au dernier nœud enfant présent dans l'objet DOM xml.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_lastChild(p) {
a = p.lastChild;
while (a.nodeType != 1){
a = a.previousSibling;
}
return a;
}
var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(lastchild.nodeName);
</script>
</body>
</html>Exécution
Enregistrez ce fichier sous last_node_example.htm sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Dans la sortie, nous obtenons le dernier nœud enfant de Employee, c'est-à-dire Email .
Frère suivant
Cette propriété est de type Node et représente le prochain enfant, c'est-à-dire le prochain frère de l'élément enfant spécifié présent dans le NodeList.
Exemple
L'exemple suivant (nextSibling_example.htm) analyse un document XML ( node.xml ) dans un objet XML DOM qui accède immédiatement au nœud suivant présent dans le document xml.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_nextSibling(p) {
a = p.nextSibling;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
document.write(nextsibling.nodeName);
</script>
</body>
</html>Exécution
Enregistrez ce fichier sous nextSibling_example.htm sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Dans la sortie, nous obtenons le nœud frère suivant de FirstName, c'est-à-dire LastName .
Frère ou sœur précédent
Cette propriété est de type Node et représente l'enfant précédent, c'est-à-dire le frère précédent de l'élément enfant spécifié présent dans le NodeList.
Exemple
L'exemple suivant (previoussibling_example.htm) analyse un document XML ( node.xml ) dans un objet XML DOM, puis parcourt le nœud avant du dernier nœud enfant présent dans le document xml.
<!DOCTYPE html>
<body>
<script>
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_previousSibling(p) {
a = p.previousSibling;
while (a.nodeType != 1) {
a = a.previousSibling;
}
return a;
}
prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
document.write(prevsibling.nodeName);
</script>
</body>
</html>Exécution
Enregistrez ce fichier sous le nom previoussibling_example.htm sur le chemin du serveur (ce fichier et node.xml doivent être sur le même chemin sur votre serveur). Dans la sortie, nous obtenons le nœud frère précédent de Email, c'est-à-dire ContactNo .