Navigation HTML-DOM
Le DOM HTML vous permet de naviguer dans une arborescence de nœuds en utilisant les relations de nœuds.
Liste de nœuds HTML DOM
La méthode getElementsByTagName() renvoie une liste de nœuds. Une liste de nœuds est un tableau de nœuds.
Le code suivant sélectionne tous les nœuds <p> du document :
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<script>
x=document.getElementsByTagName("p");
document.write("The innerHTML of the second paragraph is: " + x[1].innerHTML);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque :
L'indice commence à 0.
Longueur de la liste de nœuds HTML DOM
L'attribut length définit le nombre de nœuds dans la liste de nœuds.
Vous pouvez utiliser l'attribut length pour parcourir une liste de nœuds :
Instance
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>length</b> property.</p>
<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
</html>Instance en cours d'exécution»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Analyse de l'instance :
Obtenir tous les nœuds d'éléments<p> >
- Sortir la valeur du nœud de texte de chaque élément <p>
Relation du nœud de navigationVous pouvez utilisez trois attributs de nœud : parentNode , firstChild et lastChild pour naviguer dans la structure du document. Veuillez consulter l'extrait HTML suivant :
<p>Bonjour tout le monde !</p> ;
<div>
<p>Le DOM est très utile !</p>
<p>Cet exemple illustre les relations entre les nœuds.</p>
</div>
</body>
</html>
- Le premier élément <p> est le premier élément enfant (firstChild) de l'élément <body>
- <div> body> Le dernier élément enfant (lastChild)
- <body> est le nœud parent (parentNode)
<🎜 du premier élément <p> ;div> element >
l'attribut firstChild peut être utilisé pour accéder au texte d'un élément :
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Exécuter l'instance »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Il y a ici deux attributs spéciaux qui peuvent accéder à tous les documents :
- document.documentElement - tous les documents
- document.body - le corps du document
<html><!DOCTYPE html>
<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>
Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
childNodes et nodeValue
En plus de la propriété innerHTML, vous pouvez également utiliser les propriétés childNodes et nodeValue pour obtenir le contenu d'un élément.
Le code suivant récupère la valeur de l'élément <p> avec id="intro" :
Instance
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans l'exemple ci-dessus, getElementById est une méthode, tandis que childNodes et nodeValue sont des propriétés.
Dans ce tutoriel, nous utiliserons la propriété innerHTML. Cependant, l’apprentissage de la méthode ci-dessus vous aidera à comprendre la structure arborescente et la navigation du DOM.
