Navigation HTML DOM de JavaScript
- Page précédente Programmeur d'événements DOM
- Page suivante Nœuds DOM
Avec HTML DOM, vous pouvez utiliser les relations de noeuds pour naviguer dans l'arbre des noeuds.
Nœuds DOM
Selon la norme W3C HTML DOM, tout ce qui se trouve dans le document HTML est un noeud :
- L'ensemble du document est un noeud de document
- Chaque élément HTML est un noeud d'élément
- Le texte dans l'élément HTML est un noeud de texte
- Chaque attribut HTML est un noeud d'attribut
- Toutes les annotations sont des noeuds de commentaires
Avec HTML DOM, tous les noeuds de l'arbre des noeuds peuvent être accédés via JavaScript.
Il est possible de créer de nouveaux noeuds, de modifier et de supprimer tous les noeuds.
Relations de noeuds
Les noeuds dans l'arbre des noeuds sont entre eux dans une certaine relation hiérarchique.
- Les termes (parent, enfant et frère, parent, enfant et frère) sont utilisés pour décrire ces relations.
- Dans l'arbre des noeuds, le noeud en haut est appelé racine (le noeud racine)
- Chaque noeud a un noeud parent, sauf le racine (le noeud racine n'a pas de noeud parent)
- Les noeuds peuvent avoir un certain nombre de sous-noeuds
- Les frères et sœurs (ou frères et sœurs) sont des noeuds qui ont le même parent.
<html>
<head>
<title>Guide DOM</title>
</head>
<body>
<h1>Le premier cours sur DOM</h1>
<p>Hello world!</p>
</body>
</html>
À partir du HTML ci-dessus, vous pouvez lire les informations suivantes :
- est le noeud racine
- n'a pas de parent
- est le parent de <head> et <body>
- est le premier sous-element de <html>
- <body> est le dernier enfant de <html>
En même temps :
- <head> a un enfant : <title>
- <title> a un enfant (nœud de texte) : "DOM tutoriel"
- <body> a deux enfants : <h1> et <p>
- <h1> a un enfant : "DOM première leçon"
- <p> a un enfant : "Hello world!"
- <h1> et <p> sont frères
Navigation entre les nœuds
Avec JavaScript, vous pouvez utiliser les propriétés de nœuds suivantes pour naviguer entre les nœuds :
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
nœuds enfants et valeurs de nœuds
Une erreur courante dans le traitement DOM consiste à croire que les nœuds d'élément contiennent du texte.
Exemple :
<title id="demo">DOM tutoriel</title>
（dans l'exemple précédent）le nœud d'élément <title> Ne contient pasde texte.
Il contient un texte de valeur "DOM tutoriel"Nœud de texte.
La valeur d'un nœud de texte peut être obtenue via la propriété innerHTML en utilisant la propriété
var myTitle = document.getElementById("demo").innerHTML;
Accéder à la propriété innerHTML équivaut à accéder au premier enfant nodeValue:
var myTitle = document.getElementById("demo").firstChild.nodeValue;
Vous pouvez également accéder au premier enfant de la sorte :
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Les trois exemples suivants récupèrent <h1> et copier le texte de l'élément <p> Dans l'élément :
Exemple 1
<html>
<body>
<h1 id="id01">Mon premier page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
Exemple 2
<html>
<body>
<h1 id="id01">Mon premier page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
Exemple 3
<html>
<body>
<h1 id="id01">Mon premier 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 innerHTML Récupérer le contenu d'un élément HTML.
Cependant, apprendre les autres méthodes mentionnées aide à comprendre la structure arborescente et la navigation du DOM.
Nœud racine DOM
Il y a deux attributs spéciaux qui permettent d'accéder au document complet :
- document.body - Corps du document
- document.documentElement - Document complet
Exemple
<html> <body> <p>Hello World!</p> <div> <p>DOM est très utile !</p> <p>Cet exemple démontre l'attribut <b>document.body</b> .</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
Exemple
<html> <body> <p>Hello World!</p> <div> <p>DOM est très utile !</p> <p>Cet exemple démontre l'attribut <b>document.documentElement</b> .</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
Attribut nodeName
nodeName L'attribut spécifie le nom du nœud.
- nodeName est en lecture seule.
- Le nodeName du nœud d'élément est équivalent au nom de la balise.
- Le nodeName du nœud d'attribut est le nom de l'attribut.
- Le nodeName du nœud de texte est toujours #text.
- Le nodeName du nœud de document est toujours #document.
Exemple
<h1 id="id01">Mon premier site web</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
Remarque :nodeName contient toujours le nom de balise en majuscules de l'élément HTML.
Attribut nodeValue
nodeValue L'attribut spécifie la valeur du nœud.
- L'attribut nodeValue du nœud d'élément est undefined.
- L'attribut nodeValue du nœud de texte est le texte.
- L'attribut nodeValue du nœud d'attribut est la valeur de l'attribut.
Attribut nodeType
nodeType l'attribut retourne le type du nœud.nodeType est en lecture seule.
Exemple
<h1 id="id01">Mon premier site web</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
La propriété nodeType la plus importante est :
| Nœud | Type | Exemple |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (obsolète) |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- C'est un commentaire --> |
| DOCUMENT_NODE | 9 | Le document HTML lui-même (parent de <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!DOCTYPE html> |
Type 2 est obsolète dans HTML DOM. Il n'est pas obsolète dans XML DOM.
- Page précédente Programmeur d'événements DOM
- Page suivante Nœuds DOM
