Maison > Article > développement back-end > Exemple de code de structure arborescente et de modèle objet de document DOM en XML (image)

Exemple de code de structure arborescente et de modèle objet de document DOM en XML (image)

黄舟original: 2017-03-10 19:26:212026parcourir

Cet article présente principalement la structure arborescente et le modèle objet de document DOM en XML. L'article donne des exemples d'analyse JavaScript des objets DOM. Les amis dans le besoin peuvent se référer à

Structure arborescente
Les documents XML sont toujours descriptifs. Les structures arborescentes, souvent appelées arbres XML, jouent un rôle important dans la description des documents XML.

Cette arborescence contient l'élément racine (parent), les éléments enfants, etc. En utilisant une structure arborescente, nous pouvons comprendre toutes les branches et sous-branches suivantes provenant de l’élément racine. L'analyse commence à l'élément racine et descend jusqu'à la première branche pointant vers un élément, à partir de laquelle la première branche et ses enfants sont traités.

Exemple

L'exemple suivant illustre une structure arborescente XML simple :

<?xml version="1.0"?>  
<Company>  
    <Employee>  
        <FirstName>Tanmay</FirstName>  
        <LastName>Patil</LastName>  
        <ContactNo>1234567890</ContactNo>  
        <Email>tanmaypatil@xyz.com</Email>  
        <Address>  
            <City>Bangalore</City>  
            <State>Karnataka</State>  
            <Zip>560212</Zip>  
        </Address>  
    </Employee>  
</Company>

La structure arborescente suivante représente le document XML ci-dessus :

Exemple de code de structure arborescente et de modèle objet de document DOM en XML (image)

Dans l'image, il y a un élément racine appelé 32c3713aa2138e0cde00114c704ab347. Il y a un autre élément a7c15504e26c2dc9d33fa17ec3230b5f Au sein de l'élément employé, il existe 5 branches, à savoir f2e90542b5a58058db8f193d5beb15a8, 59167353502e8b7287d6dd485f7f1057, ee8c75b84e5f6309a3ff5787a453f502, d9a1fb039fef8fc6c3cf193249481d23 et f2d2d42736253fc13ad1661a02a3d5ac. Dans l'élément 4105211caaee9b335c536aeb3af8c57c, il existe trois sous-branches, à savoir 6c132ff3bb7a6c407d7ed87f2557a5a4, c29070a8b11e875ca4756dbf4d49d8f9.

Modèle objet de document DOM
Le modèle objet de document (DOM) est la base de XML. Les documents XML possèdent une unité hiérarchique d'informations appelée nœud ; le DOM est un moyen de décrire ces nœuds et les relations entre eux.

Un document DOM est un ensemble de nœuds ou de blocs d'informations organisés selon une structure hiérarchique. Cette hiérarchie permet aux développeurs de parcourir cette arborescence de nœuds pour interroger des informations spécifiques. Parce qu'il est basé sur une hiérarchie d'informations, le DOM est également considéré comme basé sur une arborescence de nœuds.

D'autre part, XML DOM fournit également une API qui permet aux développeurs d'ajouter, de modifier, de déplacer ou de supprimer des nœuds n'importe où dans l'arborescence des nœuds afin de créer des applications.

Exemple

L'exemple suivant (sample.htm) analyse un document XML ("address.xml") dans un objet XML DOM puis extrait certaines informations à l'aide de JavaScript :

<!DOCTYPE html>  
<html>  
<body>  
<h1>TutorialsPoint DOM example </h1>  
<div>  
<b>Name:</b> <span id="name"></span><br>  
<b>Company:</b> <span id="company"></span><br>  
<b>Phone:</b> <span id="phone"></span>  
</div>  
<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","/xml/address.xml",false);   
xmlhttp.send();   
xmlDoc=xmlhttp.responseXML;   
document.getElementById("name").innerHTML=   
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;   
document.getElementById("company").innerHTML=   
xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;   
document.getElementById("phone").innerHTML=   
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;   
</script>  
</body  
</html>

Le contenu de address.xml est le suivant :

<?xml version="1.0"?>  
<contact-info>  
    <name>Tanmay Patil</name>  
    <company>TutorialsPoint</company>  
    <phone>(011) 123-4567</phone>  
</contact-info>

On peut sauvegarder ces deux fichiers sample.htm et address.xml dans le même répertoire / xml, puis exécutez le fichier sample.htm en l'ouvrant dans le navigateur. Cela devrait produire un résultat comme celui-ci :

Exemple de code de structure arborescente et de modèle objet de document DOM en XML (image)

Ici, vous pouvez voir que nous avons extrait chaque nœud enfant et affiché sa valeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé d'explication de code des espaces de noms en XMLArticle suivant：Exemple détaillé d'explication de code des espaces de noms en XML

Articles Liés

Voir plus