web-dev-qa-db-fra.com

HTML getElementsByClassName renvoie HTMLCollection avec une longueur de

J'essaie d'utiliser jsdocument.getElementsByClassName pour localiser un élément html, qui est en fait l'en-tête d'une table.

Pour les codes suivants:

console.log(document.getElementsByClassName('gtableheader'));

De la Firebug, je peux voir qu'il enregistre une HTMLCollection et, lorsque je clique dessus, il affiche:

-> 0         tr.gtableheader
   length    1

Donc, il localise l'élément que je veux.

Mais quand j'utilise:

console.log(document.getElementsByClassName('gtableheader').length);

Alors la sortie est 0. C'est tellement bizarre, des idées à ce sujet?

javascripthtmldom
8
chrisTina

Utiliser getElementsByClassName() renverra tous les éléments avec ce nom de classe dans un document en tant que NodeList. Cet objet représente une collection de nœuds accessibles par des numéros d'index, commençant par 0. Pour accéder aux éléments de la liste de noeuds, vous devez utiliser une boucle.

Lorsque vous console.log(document.getElementsByClassName('gtableheader').length); , vous voyez 0 car, lorsque vous l'exécutez, il n'y a pas d'élément de classe gtableheader. Vous pouvez voir les éléments dans la console car document.getElementsByClassName() renvoie une collection en direct mise à jour lors de l'ajout des nouveaux éléments.

De même, dans le code que vous utilisez et dont la longueur est 0, vous pouvez utiliser le code ci-dessous pour accéder au nom de la classe. 

document.getElementsByClassName('gtableheader')[0].style.color="red";

Si vous souhaitez accéder à tous les éléments de la classe, vous pouvez utiliser une boucle for.

var x = document.getElementsByClassName('gtableheader');
for (var i = 0; i < x.length; i++) {
    x[i].style.color = "red";
}

Plus d'informations: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

5
Victor Luna

En effet, la getElementsByClassName renvoie une live collection. La propriété length de l'objet est 0 car à ce moment-là, il n'y a aucun élément avec ce className dans le DOM. Comme la console affiche la représentation en direct d'un objet, elle affiche tous les éléments correspondants lorsque les éléments sont ajoutés au DOM. 

L'analyseur DOM analyse les documents de haut en bas. Lorsqu'il atteint une balise, il l'analyse et ajoute la représentation DOM de celle-ci (une instance d'interface HTMLElement) au modèle d'objet document. Vous devez déplacer la balise de script à la fin de la balise body ou écouter l'événement DOMContentLoaded qui est déclenché lorsque le document HTML initial a été complètement chargé et analysé.

10
undefined

J'ai eu un problème similaire, mais les autres réponses ici n'ont pas conduit à ma solution. J'ai finalement réalisé qu'à l'époque où mon code fonctionnait, le DOM n'était pas encore complètement construit, donc le tableau vide. Ce que je voyais dans la console, un tableau rempli, était ce qui existait après la formation complète du DOM et la fin du script.

Ce qui a fonctionné pour moi a été d’envelopper le code qui nécessitait le tableau dans un MutationObserver et de le configurer pour regarder le div codé en dur contenant les sections qui seraient générées dynamiquement (voir ceci StackOverflow answer et le MDN documentation ).

Essaye ça:

var divArray = document.getElementById('hardCodedContainer');

var observer = new MutationObserver(function(){
   console.log(document.getElementsByClassName('gtableheader').length);
   console.log(document.getElementsByClassName('gtableheader'));
};

observer.observe(divArray, { attributes: false, childList: true, subtree: true });

// When you've got what you need, you should call this function to trigger a disconnect 
function classesFound(){
   observer.disconnect();
};
0
jamesthe500

Utilisez ceci pour le faire fonctionner 

window.addEventListener("load", function(event) {
    console.log(document.getElementsByClassName('gtableheader').length);
});
0
Benzion Gross