Le DOM définit une norme pour l'accès et la manipulation de documents.
Le DOM XML présente un document XML comme une arborescence.
Le code HTML DOM présente un document HTML comme une arborescence.
Comprendre le DOM est un must pour tous ceux qui travaillent avec HTML ou XML.
XML DOM Exemple d'arbre
Quel est le DOM?
Le DOM définit une norme pour l'accès aux documents tels que XML et HTML:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Le DOM est séparé en 3 parties / niveaux différents:
- Core DOM de Core DOM - modèle standard pour tout document structuré
- XML DOM - modèle standard pour les documents XML
- HTML DOM - modèle standard pour les documents HTML
Le DOM définit les objects and properties les methods (interface) objects and properties de tous les éléments du document, et les methods (interface) pour y accéder.
Le code HTML DOM
Le code HTML DOM définit une méthode standard pour accéder et manipuler des documents HTML.
Tous les éléments HTML peuvent être accessibles via le DOM HTML.
Le code HTML DOM définit les objects, properties and methods de tous les éléments HTML.
Modifier la valeur d'un élément HTML
Cet exemple modifie la valeur d'un élément HTML avec id = "demo":
Exemple
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Essayez - le vous - même » Cet exemple modifie la valeur de la première <h1> élément dans un document HTML:
Exemple
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Essayez - le vous - même » Remarque: Même si le document HTML containes seulement UN <h1> élément que vous avez encore à préciser l'index du tableau [0], parce que le getElementsByTagName() méthode renvoie toujours un tableau.
Vous pouvez en apprendre beaucoup plus sur le DOM HTML dans notre tutoriel JavaScript .
Le DOM XML
Le DOM XML définit une méthode standard pour accéder et manipuler des documents XML.
Tous les éléments XML peuvent être accessibles via le DOM XML.
Le DOM XML définit les objects, properties and methods de tous les éléments XML.
Le DOM XML est:
- Un modèle objet standard pour XML
- Une interface de programmation standard pour XML
- Platform- et indépendant de la langue
- Une norme W3C
En d' autres termes: The XML DOM is a standard for how to get, change, add, or delete XML elements. la The XML DOM is a standard for how to get, change, add, or delete XML elements. des The XML DOM is a standard for how to get, change, add, or delete XML elements.
Obtenez la valeur d'un élément XML
Ce code récupère la valeur de texte de la première <title> élément dans un document XML:
Exemple
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Chargement d'un fichier XML
Le fichier XML utilisé dans les exemples ci - dessous est books.xml .
Cet exemple lit "books.xml" en xmlDoc et récupère la valeur de texte de la première <title> élément books.xml:
Exemple
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
Essayez - le vous - même » Exemple Explained
- xmlDoc - l'objet DOM XML créé par l'analyseur.
- getElementsByTagName("title")[0] - obtenir le premier <title> élément
- childNodes[0] - le premier enfant du <title> élément (nœud de texte)
- nodeValue - la valeur du noeud (the text itself) - (the text itself)
Chargement d'une chaîne XML
Cet exemple charge une chaîne de texte dans un objet DOM XML, et extrait l'information de celui-ci avec JavaScript:
Exemple
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue ;
</script>
</body>
</html>
Essayez - le vous - même » Interface de programmation
Les modèles DOM XML comme un ensemble d'objets de nœud. Les noeuds peuvent être accessibles avec d'autres langages de programmation JavaScript ou. Dans ce tutoriel, nous utilisons JavaScript.
L'interface de programmation du DOM est définie par un ensemble des propriétés et des méthodes standard.
Properties sont souvent désignés comme quelque chose qui est (ie nodename est "livre").
Les Methods sont souvent désignés comme quelque chose qui est fait (ie supprimer "livre").
Propriétés DOM XML
Ce sont des propriétés typiques DOM:
- x.nodeName - le nom de x
- x.nodeValue - la valeur de x
- x.parentNode - le noeud parent de x
- x.childNodes - les nœuds enfants de x
- x.attributes - les attributs de nœuds x
Remarque: Dans la liste ci-dessus, x est un objet de noeud.
Méthodes DOM XML
- x.getElementsByTagName( name ) - obtenir tous les éléments avec un nom de balise spécifié
- x.appendChild( node ) - insérer un nœud enfant à x
- x.removeChild( node ) - supprimer un nœud de x enfant
Remarque: Dans la liste ci-dessus, x est un objet de noeud.