Avec le DOM HTML, vous pouvez naviguer dans l'arborescence de nœud à l'aide des relations de nœuds.
DOM Nodes
Selon la norme W3C HTML DOM, tout dans un document HTML est un nœud:
- L'ensemble du document 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
- Tous les commentaires sont nœuds de commentaire
Avec le DOM HTML, tous les noeuds dans l'arborescence du noeud peut être consulté par JavaScript.
Les nouveaux nœuds peuvent être créés, et tous les noeuds peuvent être modifiés ou supprimés.
Relations Node
Les noeuds dans l'arborescence de noeuds ont une relation hiérarchique les unes aux autres.
Les termes parent, enfant, frère et sont utilisés pour décrire les relations.
- Dans un arbre de nœud, le nœud supérieur est appelé la racine (ou nœud racine)
- Chaque nœud a exactement un parent, à l'exception de la racine (qui n'a pas de parent)
- Un nœud peut avoir un nombre d'enfants
- Frères et sœurs (frères ou sœurs) sont des noeuds avec le même parent
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
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 Leçon un"
- <p> a un enfant: "Bonjour tout le monde!"
- <h1> et <p> sont frères et sœurs
Navigation entre les nœuds
Vous pouvez utiliser les propriétés du nœud suivantes pour naviguer entre les nœuds avec JavaScript:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Attention !
Une erreur courante dans le traitement DOM est d'attendre un nœud d'élément pour contenir le texte.
Dans cet exemple:<title> Tutoriel DOM </title> , le nœud de l' élément <title> ne contient pas de texte.Il contient unnœud de texte avec la valeur "Tutoriel DOM".
La valeur du nœud de texte peut être consulté par le noeud innerHTML la propriété, ou nodeValue .
Child Nodes et Node Valeurs
En plus de la innerHTML propriété, vous pouvez également utiliser les childNodes et nodeValue propriétés pour obtenir le contenu d'un élément.
L'exemple suivant recueille la valeur de noeud d'un <h1> élément et copie dans un <p> élément:
Exemple
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> Essayez - le vous - même » Dans l'exemple ci - dessus, getElementById est une méthode, tandis que childNodes et nodeValue sont des propriétés.
Dans ce tutoriel , nous utilisons le innerHTML propriété. Cependant, l'apprentissage de la méthode ci-dessus est utile pour comprendre la structure de l'arbre et la navigation du DOM.
Utilisation de la firstChild propriété est le même que l' utilisation childNodes[0] :
Exemple
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> Essayez - le vous - même » DOM racine Nodes
Il y a deux propriétés spéciales qui permettent d'accéder à l'intégralité du document:
- document.body - Le corps du document
- document.documentElement - Le document complet
Exemple
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html> Essayez - le vous - même » Exemple
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html> Essayez - le vous - même » Le nodeName propriété
Le nodeName propriété spécifie le nom d'un nœud.
- nodeName est en lecture seule
- nodeName d'un noeud d'élément est le même que le nom de la balise
- nodeName d'un noeud d'attribut est le nom d'attribut
- nodeName d'un nœud de texte est toujours #text
- nodeName du noeud de document est toujours #document
Remarque: nodeName contient toujours le nom de la balise majuscule d'un élément HTML.
Le nodeValue propriété
La nodeValue propriété spécifie la valeur d'un nœud.
- nodeValue pour les noeuds d'élément est indéfini
- nodeValue pour les nœuds de texte est le texte lui - même
- nodeValue pour les nœuds d'attribut est la valeur d'attribut
Le nodeType propriété
La nodeType propriété renvoie le type de nœud. nodeType est en lecture seule.
Les types de noeuds les plus importants sont les suivants:
| Type d'élément | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |