Navigation JavaScript HTML DOM
Avec le DOM HTML, vous pouvez naviguer dans l'arborescence des nœuds à l'aide des relations entre les nœuds.
Nœuds DOM
Selon la norme W3C HTML DOM, tout dans un document HTML est un nœud :
- Le document entier est un nœud de document
- Chaque élément HTML est un nœud d'élément
- Le texte à l'intérieur des éléments HTML sont des nœuds de texte
- Chaque attribut HTML est un nœud d'attribut (obsolète)
- Tous les commentaires sont des nœuds de commentaires
Avec le DOM HTML, tous les nœuds de l'arborescence des nœuds sont accessibles par JavaScript.
De nouveaux nœuds peuvent être créés et tous les nœuds peuvent être modifiés ou supprimés.
Relations de nœud
Les nœuds de l'arborescence des nœuds ont une relation hiérarchique les uns avec les autres.
Les termes parent, enfant et frère sont utilisés pour décrire les relations.
- Dans une arborescence de nœuds, le nœud supérieur est appelé la racine (ou nœud racine)
- Chaque nœud a exactement un parent, sauf la racine (qui n'a pas de parent)
- Un nœud peut avoir plusieurs fils
- Les frères et sœurs (frères ou sœurs) sont des nœuds avec le même parent
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
À partir du HTML ci-dessus, vous pouvez lire :
<html>est le nœud racine<html>n'a pas de parents<html>est le parent de<head>et<body><head>est le premier enfant de<html><body>est le dernier enfant de<html>
et:
<head>a un enfant :<title><title>a un enfant (un nœud de texte) : "Tutoriel DOM"<body>a deux enfants :<h1>et<p><h1>a un enfant : "DOM Lesson one"<p>a un enfant: "Hello world!"<h1>et<p>sont frères et sœurs
Naviguer entre les nœuds
Vous pouvez utiliser les propriétés de nœud suivantes pour naviguer entre les nœuds avec JavaScript :
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
Nœuds enfants et valeurs de nœud
Une erreur courante dans le traitement DOM est de s'attendre à ce qu'un nœud d'élément contienne du texte.
Exemple:
<title
id="demo">DOM Tutorial</title>
Le nœud d'élément
<title>(dans l'exemple ci-dessus) ne contient pas de texte.
Il contient un nœud de texte avec la valeur "Tutoriel DOM".
La valeur du nœud de texte est accessible par la
innerHTMLpropriété du nœud :
myTitle = document.getElementById("demo").innerHTML;
L'accès à la propriété innerHTML est identique à l'accès au nodeValue
du premier enfant :
myTitle = document.getElementById("demo").firstChild.nodeValue;
L'accès au premier enfant peut aussi se faire comme ceci :
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Tous les (3) exemples suivants récupèrent le texte d'un <h1>élément et le copient dans un <p>élément :
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Exemple
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
Dans ce tutoriel, nous utilisons la propriété innerHTML pour récupérer le contenu d'un élément HTML.
Cependant, apprendre les autres méthodes ci-dessus est utile pour comprendre l'arborescence et la navigation du DOM.
Nœuds racine DOM
Deux propriétés spéciales permettent d'accéder au document complet :
document.body- Le corps du documentdocument.documentElement- Le dossier complet
Exemple
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
Exemple
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
La propriété nodeName
La nodeNamepropriété spécifie le nom d'un nœud.
- nodeName est en lecture seule
- nodeName d'un nœud d'élément est le même que le nom de la balise
- nodeName d'un nœud d'attribut est le nom de l'attribut
- nodeName d'un nœud de texte est toujours #text
- nodeName du nœud de document est toujours #document
Exemple
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
Remarque : nodeName contient toujours le nom de balise en majuscule d'un élément HTML.
La propriété nodeValue
La nodeValuepropriété spécifie la valeur d'un nœud.
- nodeValue pour les nœuds d'élément est
null - nodeValue pour les nœuds de texte est le texte lui-même
- nodeValue pour les nœuds d'attribut est la valeur de l'attribut
La propriété nodeType
La nodeTypepropriété est en lecture seule. Il renvoie le type d'un nœud.
Exemple
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
Les propriétés nodeType les plus importantes sont :
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Le type 2 est obsolète dans le DOM HTML (mais fonctionne). Il n'est pas obsolète dans le DOM XML.