Derniers tutoriels de développement web
 

JavaScript DOM HTML Elements

❮ Précédent Suivant Chapitre ❯

Cette page vous apprend à trouver et éléments d'accès HTML dans une page HTML.

Trouver des éléments HTML

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

Pour ce faire, vous devez trouver les premiers éléments. Il y a deux façons de le faire:

  • Trouver des éléments HTML par id
  • Trouver des éléments HTML par nom de tag
  • Trouver des éléments HTML par class nom
  • Trouver des éléments HTML par sélecteurs CSS
  • Trouver des éléments HTML par des collections d'objets HTML

Trouver des éléments HTML par Id

La meilleure façon de trouver un élément HTML dans le DOM, est en utilisant l'élément id .

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

Exemple

var myElement = document.getElementById("intro");
Essayez - le vous - même »

Si l'élément est trouvé, la méthode retourne l'élément comme un objet (en myElement ).

Si l'élément est introuvable, myElement contiendra null.

Trouver des éléments HTML par Tag Nom

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

Exemple

var x = document.getElementsByTagName("p");
Essayez - le vous - même »

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

Exemple

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Essayez - le vous - même »

Trouver des éléments HTML par Class Nom

Si vous voulez trouver tous les éléments HTML avec le même class nom, utilisez getElementsByClassName() .

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

Exemple

var x = document.getElementsByClassName("intro");
Essayez - le vous - même »

Trouver des éléments par nom de classe ne fonctionne pas dans Internet Explorer 8 et les versions antérieures.

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

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

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

Exemple

var x = document.querySelectorAll("p.intro");
Essayez - le vous - même »

Le querySelectorAll() méthode ne fonctionne pas dans Internet Explorer 8 et les versions antérieures.

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

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

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;
Essayez - le vous - même »

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

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »


❮ Précédent Suivant Chapitre ❯