Votre getElementById fonctionne puisque les ID doivent être uniques et que la fonction renvoie donc toujours un seul élément (ou null si aucun n'a été trouvé).
Cependant, les méthodes getElementsByClassName , getElementsByName , getElementsByTagName et getElementsByTagNameNS retourne une collection itérable d'éléments.
Les noms des méthodes fournissent un indice : getElement implica singulier alors que getElements implica au pluriel .
La méthode querySelector renvoie également un seul élément, et querySelectorAll renvoie une collection itérable.
La collection itérable peut être soit un NodeList ou un HTMLCollection .
getElementsByName y querySelectorAll sont toutes deux spécifiées pour retourner un NodeList ; l'autre getElementsBy* méthodes sont spécifiés pour retourner un HTMLCollection mais veuillez noter que certaines versions du navigateur l'implémentent différemment.
Ces deux types de collections n'offrent pas les mêmes propriétés que les Éléments, les Nœuds ou d'autres types similaires ; c'est pourquoi la lecture de style de document.getElements ( ) échoue. En d'autres termes, un NodeList ou un HTMLCollection n'a pas de style ; seulement un Element a un style .
Ces collections "de type tableau" sont des listes qui contiennent zéro ou plusieurs éléments, sur lesquels vous devez itérer afin d'y accéder. Bien que vous puissiez les itérer de la même manière qu'un tableau, notez qu'elles sont différents de Array s .
Dans les navigateurs modernes, vous pouvez convertir ces itérables en un véritable tableau à l'aide de la commande Array.from ; alors vous pouvez utiliser forEach et autres Méthodes de tableau, par exemple méthodes d'itération :
Array.from(document.getElementsByClassName("myElement"))
.forEach((element) => element.style.size = "100px");
Dans les anciens navigateurs qui ne prennent pas en charge Array.from ou les méthodes d'itération, vous pouvez toujours utiliser Array.prototype.slice.call . Ensuite, vous pouvez itérer sur le tableau comme vous le feriez avec un vrai tableau :
var elements = Array.prototype.slice
.call(document.getElementsByClassName("myElement"));
for(var i = 0; i < elements.length; ++i){
elements[i].style.size = "100px";
}
Vous pouvez également itérer sur les NodeList ou HTMLCollection en soi, mais sachez que dans la plupart des cas, ces collectes sont en direct ( Documents MDN , DOM spec ), c'est-à-dire qu'ils sont mis à jour au fur et à mesure que le DOM change. Donc, si vous insérez ou supprimez des éléments pendant que vous bouclez, assurez-vous de ne pas accidentellement sauter des éléments ou créer une boucle infinie . La documentation MDN doit toujours indiquer si une méthode renvoie une collection vivante ou statique.
Par exemple, un NodeList propose des méthodes d'itération telles que forEach dans les navigateurs modernes :
document.querySelectorAll(".myElement")
.forEach((element) => element.style.size = "100px");
Un simple for peut également être utilisé :
var elements = document.getElementsByClassName("myElement");
for(var i = 0; i < elements.length; ++i){
elements[i].style.size = "100px";
}
A part : .childNodes donne un en direct NodeList y .children donne un en direct HTMLCollection Ces deux getters doivent donc être manipulés avec précaution.
Il existe des bibliothèques comme jQuery qui rendent l'interrogation du DOM un peu plus courte et créent une couche d'abstraction sur "un élément" et "une collection d'éléments" :
$(".myElement").css("size", "100px");
