Collections JavaScript H TML DOM
L'objet HTMLCollection
La getElementsByTagName()méthode renvoie un HTMLCollectionobjet.
Un HTMLCollectionobjet est une liste de type tableau (collection) d'éléments HTML.
Le code suivant sélectionne tous les <p>éléments d'un document :
Exemple
const myCollection = document.getElementsByTagName("p");
Les éléments de la collection sont accessibles par un numéro d'index.
Pour accéder au second élément <p> vous pouvez écrire :
myCollection[1]
Remarque : L'indice commence à 0.
Longueur de la collection HTML HTML
La lengthpropriété définit le nombre d'éléments dans un HTMLCollection:
Exemple
myCollection.length
La lengthpropriété est utile lorsque vous souhaitez parcourir les éléments d'une collection :
Exemple
Modifiez la couleur du texte de tous les éléments <p> :
const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}
Une HTMLCollection n'est PAS un tableau !
Une HTMLCollection peut ressembler à un tableau, mais ce n'est pas le cas.
Vous pouvez parcourir la liste et faire référence aux éléments avec un nombre (tout comme un tableau).
Cependant, vous ne pouvez pas utiliser de méthodes de tableau telles que valueOf(), pop(), push() ou join() sur une HTMLCollection.