XML DOM avancé
XML DOM - Avancé
Dans les chapitres précédents de ce didacticiel, nous avons présenté le XML DOM et utilisé la méthode getElementsByTagName() du XML DOM pour récupérer les données d'un document XML. pour récupérer des données.
Dans ce chapitre, nous combinerons quelques autres méthodes XML DOM importantes.
Vous pouvez en savoir plus sur XML DOM dans notre tutoriel XML DOM .
Récupérer la valeur de l'élément
Le fichier XML utilisé dans l'exemple ci-dessous : books.xml.
L'exemple suivant récupère la valeur texte du premier élément <title> :
Exemple
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Obtenir la valeur de l'attribut
Le l'instance suivante récupère la première valeur texte de l'attribut "lang" d'un élément <title> :
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>Exécution de l'instance»
Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne
Modifiez la valeur de l'élément
Le L'exemple suivant modifie la valeur du premier élément <title> Valeur du texte :
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Création d'un nouvel attribut
La méthode setAttribute() du DOM XML peut être utilisé pour modifier la valeur de l'attribut existant ou créer un nouvel attribut.
L'exemple suivant crée un nouvel attribut (edition="first") et l'ajoute à chaque élément <book> :
Exemple
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("edition","first");
}
//Output all attribute values
for (i=0;i<x.length;i++)
{
document.write("Category: " + x[i].getAttribute('category') + "<br>");
document.write("Edition: " + x[i].getAttribute('edition') + "<br>");
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Création Le createElement( ) méthode de l'élément
XML DOM crée un nouveau nœud d'élément.
La méthode createTextNode() du XML DOM crée un nouveau nœud de texte.
La méthode appendChild() du XML DOM ajoute un nœud enfant à un nœud (après le dernier nœud enfant).
Pour créer un nouvel élément avec du contenu textuel, vous devez créer un nouveau nœud d'élément et un nouveau nœud de texte en même temps, puis l'ajouter au nœud existant.
L'exemple suivant crée un nouvel élément (<edition>) avec le texte suivant : First, puis l'ajoute au premier élément <book>
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);
for (i=0;i<x[0].childNodes.length;i++)
{
if (x[0].childNodes[i].nodeType==1)
{
document.write(x[0].childNodes[i].nodeName);
document.write(": ");
document.write(x[0].childNodes[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Explication de l'instance
Créer un élément <edition>
Créer un nœud de texte avec la valeur "Premier"
-
Ajoutez ce nœud de texte au nouvel élément <edition>
Ajoutez l'élément <edition> au premier élément <book> >
Supprimer l'élément
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("book")[0];
document.write("Child nodes before removal: ");
document.write(x.childNodes.length);
x.removeChild(x.childNodes[0]);
document.write("<br>Child nodes after removal: ");
document.write(x.childNodes.length);
</script>
</body>
</html>Cliquez sur "Exécuter l'instance" bouton pour afficher en ligne Exemple Remarque :
