Collections HTML DOM JavaScript

Objet HTMLCollection

getElementsByTagName() La méthode retourne HTMLCollection Objet.

Un objet HTMLCollection est une liste d'éléments HTML de type tableau (collection).

Le code suivant sélectionne tous les éléments <p> du document :

Exemple

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

Les éléments de la collection peuvent être accédés par leur numéro d'index.

Pour accéder au deuxième élément <p>, vous pouvez écrire ainsi :

y = x[1];

Essayez-le vous-même

Remarque :L'index commence à 0.

Longueur de HTMLCollection HTML

length La propriété définit le nombre d'éléments dans l'HTMLCollection :

Exemple

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

Essayez-le vous-même

Explication de l'exemple :

  • Crée une collection de tous les éléments <p> :
  • Affiche la longueur de la collection

length Les propriétés sont utiles lorsque vous devez parcourir les éléments d'une collection :

Exemple

Modifier la couleur de fond 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

HTMLCollection n'est pas un tableau !

HTMLCollection semble être comme un tableau, mais ce n'est pas un tableau.

Vous pouvez parcourir la liste et accéder aux éléments par référence numérique (comme dans un tableau).

Cependant, vous ne pouvez pas utiliser des méthodes d'array sur HTMLCollection, comme valueOf()、pop()、push() ou join().