Collection HTML DOM JavaScript

Ce chapitre présente l'utilisation des collections DOM.

Objet HTMLCollection

La méthode getElementsByTagName() renvoieHTMLCollectionun objet.

L'objet HTMLCollection est similaire à un tableau qui contient des éléments HTML.

Le code suivant récupère tous les éléments <p> du document :

Exemples

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

Les éléments d'une collection sont accessibles par index (en commençant à 0).

Pour accéder au deuxième élément <p>, vous pouvez utiliser le code suivant :

y = x[1];

Essayez-le vous-même »

Propriété length de l'objet HTMLCollection

La propriété length de l'objet HTMLCollection définit le nombre d'éléments dans la collection.

Exemples

var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;

Essayez-le vous-même »

Analyse de l'exemple

Obtenez la collection d'éléments <p> :

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

Affichez le nombre d'éléments dans la collection :

document.getElementById("demo").innerHTML = myCollection.length;

La propriété length de la collection est souvent utilisée pour parcourir les éléments d'une collection.

Exemples

Modifiez la couleur d'arrière-plan de tous les éléments <p> :

var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }

Essayez-le vous-même »

Remarque

HTMLCollection n'est pas un tableau !

HTMLCollection peut ressembler à un tableau, mais ce n'en est pas un.

Vous pouvez utiliser des index pour obtenir des éléments comme avec un tableau.

HTMLCollection ne peut pas utiliser les méthodes de tableau : valueOf(), pop(), push() ou join().

Autres extensions