Outils Balises

Tutoriel HTML DOM Introduction au DOM HTML Nœud HTML DOM Méthodes HTML-DOM Attributs HTML DOM Accès au DOM HTML HTML DOM-Modification HTML DOM - Modifier le contenu HTML HTML DOM - Éléments HTML DOM - Événements Navigation HTML-DOM Résumé HTML DOM Exemple HTML-DOM

Manuel de référence DOM

Objet DOM HTML

Maison

Gros frontal

HTML

Manuel de référence HTML DOM chinois

Navigation HTML-DOM

annuaire

Outils Balises

Tutoriel HTML DOM

Manuel de référence DOM

Objet DOM HTML

Navigation HTML-DOM

Collection 49

Lire 20169

temps de mise à jour 2016-09-11

HTML DOM - Événements

Résumé 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 navigation

Vous pouvez utilisez trois attributs de nœud : parentNode , firstChild et lastChild pour naviguer dans la structure du document.

Veuillez consulter l'extrait HTML suivant :

<html>

<body>

<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 >

Instance

<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

Nœud racine DOM

Il y a ici deux attributs spéciaux qui peuvent accéder à tous les documents :

instance

<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.