Éléments HTML DOM JavaScript

Ce chapitre vous explique comment trouver et accéder aux éléments HTML dans une page HTML.

Recherche d'éléments HTML

Généralement, avec JavaScript, vous devez manipuler des éléments HTML.

Pour atteindre cet objectif, vous devez d'abord trouver ces éléments. Il y a plusieurs méthodes pour accomplir cette tâche :

  • Recherche d'éléments HTML via l'id
  • Recherche d'éléments HTML via le nom de balise
  • Recherche d'éléments HTML via le nom de classe
  • Recherche d'éléments HTML via un sélecteur CSS
  • Recherche d'éléments HTML via une collection d'objets HTML

Recherche d'éléments HTML via l'id

La méthode la plus simple pour trouver des éléments HTML dans le DOM est d'utiliser l'id de l'élément.

Dans cet exemple, l'élément avec l'id="intro" est recherché :

Exemple

var myElement = document.getElementById("intro");

Essayer vous-même

Si l'élément est trouvé, cette méthode retournera l'élément sous forme d'objet (dans myElement).

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

Recherche d'éléments HTML via le nom de balise

Dans cet exemple, tous les éléments sont recherchés <p> Élément :

Exemple

var x = document.getElementsByTagName("p");

Essayer vous-même

Dans cet exemple, l'élément avec l'id="main" est recherché, puis tous les éléments "main" sont recherchés <p> Élément :

Exemple

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

Essayer vous-même

Recherche d'éléments HTML via le nom de classe

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

Dans cet exemple, la liste des éléments contenant la classe "intro" est retournée :

Exemple

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

Essayer vous-même

Recherche d'éléments via le nom de classe n'est pas applicable pour Internet Explorer 8 et les versions antérieures.

Recherche d'éléments HTML via un sélecteur CSS

Si vous avez besoin de trouver tous les éléments HTML correspondant à un sélecteur CSS spécifique (id, nom de classe, type, attribut, valeur d'attribut, etc.), utilisez querySelectorAll() Méthode.

Dans cet exemple, tous les éléments avec la classe "intro" sont retournés : <p> Liste des éléments :

Exemple

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

Essayer vous-même

querySelectorAll() Non applicable pour Internet Explorer 8 et les versions antérieures.

Recherche d'objets HTML via les sélecteurs d'objets HTML

Dans cet exemple, le form élément avec id="frm1" est recherché dans la collection forms, puis toutes les valeurs des éléments sont affichées :

Exemple

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

Essayer vous-même

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