Éléments DOM HTML JavaScript

Cette page vous apprend comment trouver et accéder aux éléments HTML d'une page HTML.

Trouver des éléments HTML

Souvent, avec JavaScript, vous souhaitez manipuler des éléments HTML.

Pour ce faire, vous devez d'abord les trouver. Il existe plusieurs façons de procéder :

Trouver des éléments HTML par id
Trouver des éléments HTML par nom de balise
Trouver des éléments HTML par nom de classe
Trouver des éléments HTML par sélecteurs CSS
Trouver des éléments HTML par collections d'objets HTML

Trouver un élément HTML par Id

La façon la plus simple de trouver un élément HTML dans le DOM est d'utiliser l'id de l'élément.

Cet exemple trouve l'élément avec id="intro" :

Exemple

 const element = document.getElementById("intro"); 

Essayez-le vous-même »

Si l'élément est trouvé, la méthode renverra l'élément sous forme d'objet (dans element).

Si l'élément n'est pas trouvé, element contiendra null .

Trouver des éléments HTML par nom de balise

Cet exemple trouve tous les éléments <p> :

Exemple

 const element = document.getElementsByTagName("p"); 

Essayez-le vous-même »

Cet exemple trouve l'élément avec id="main" , puis trouve tous les éléments <p> à l'intérieur de "main" :

Exemple

 const x = document.getElementById("main"); 
 const y = x.getElementsByTagName("p"); 

Essayez-le vous-même »

Trouver des éléments HTML par nom de classe

Si vous souhaitez trouver tous les éléments HTML ayant le même nom de classe, utilisez getElementsByClassName() .

Cet exemple renvoie une liste de tous les éléments avec class="intro" .

Exemple

 const x = document.getElementsByClassName("intro"); 

Essayez-le vous-même »

Trouver des éléments HTML par sélecteurs CSS

Si vous souhaitez trouver tous les éléments HTML qui correspondent à un sélecteur CSS spécifié (id, noms de classe, types, attributs, valeurs des attributs, etc.), utilisez la méthode querySelectorAll() .

Cet exemple renvoie une liste de tous les éléments <p> avec class="intro" .

Exemple

 const x = document.querySelectorAll("p.intro"); 

Essayez-le vous-même »

Trouver des éléments HTML par collections d'objets HTML

Cet exemple trouve l'élément de formulaire avec id="frm1" dans la collection de formulaires, et affiche toutes les valeurs des éléments :

Exemple

 const x = document.forms["frm1"]; 
 let text = ""; 
 for (let i = 0; i < x.length; i++) { 
 text += x.elements[i].value + "<br>"; 
 } 
 document.getElementById("demo").innerHTML = text; 

Essayez-le vous-même »

Les objets HTML suivants (et collections d'objets) sont également accessibles :