Localisation des nœuds DOM XML

Il est possible de localiser les nœuds en utilisant les relations entre les nœuds.

Localiser les nœuds DOM

Pour accéder aux nœuds de l'arbre de nœuds via les relations entre les nœuds, cela est généralement appelé "localisation de nœuds" (ou navigation de nœuds, navigating nodes).

Dans XML DOM, les relations entre les nœuds sont définies par des attributs de nœuds :

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

La figure suivante montre books.xml Fait partie de l'arbre de nœuds et explique les relations entre les nœuds :

Arbre de nœuds DOM

DOM - Parent Node

Tous les nœuds ont un seul parent. Le code suivant navigue vers le 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

Explication de l'exemple :

  1. Transformer books.xml chargé dans xmlDoc de
  2. Obtenir le premier élément <book>
  3. Sortie du nom du nœud parent de "x"

Éviter les nœuds de texte vides

Certains navigateurs peuvent considérer les espaces ou les retours chariot comme des nœuds de texte. Cela peut poser des problèmes lors de l'utilisation des attributs suivants :

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Pour éviter de naviguer vers un nœud de texte vide (les espaces et les retours chariot entre les éléments), nous utilisons une fonction pour vérifier le type du nœud :

function get_nextSibling(n) {
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

Avec la fonction ci-dessus, nous pouvons utiliser get_nextSibling(node) pour remplacer la propriété node.nextSibling.

Explication du code :

Le type de nœud de l'élément est 1. Si le nœud de même niveau n'est pas un nœud élément, déplacez-vous au prochain nœud jusqu'à ce que vous trouviez un nœud élément.

Obtenir le premier élément enfant

Le code suivant affiche le premier élément enfant 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;
}
// Vérifiez si le premier nœud est un nœud élément
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

Essayez-le vous-même

Explication de l'exemple :

  1. Transformer books.xml Chargé dans xmlDoc
  2. Utilisez la fonction get_firstChild sur l'élément de premier <book> pour obtenir le premier élément enfant
  3. Sortie du nom du nœud du premier élément enfant

Plus d'exemples

lastChild()
Utilisez la méthode lastChild() et les fonctions personnalisées pour obtenir le dernier enfant d'un nœud.
nextSibling()
Utilisez la méthode nextSibling() et les fonctions personnalisées pour obtenir le noeud suivant de l'élément.
previousSibling()
Utilisez la méthode previousSibling() et les fonctions personnalisées pour obtenir le noeud précédent de l'élément.