HTML getElementsByClassName retourne HTMLCollection avec une longueur de 0

Je suis en train d'utiliser le js document.getElementsByClassName pour localiser un élément html, qui est en fait l'en-tête d'un tableau.

Pour les codes suivants:

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

De la Firebug, je peux le voir journal d'un HTMLCollection, et quand je clique dessus, il affiche:

-> 0         tr.gtableheader
   length    1

De sorte qu'il ne recherchez l'élément que je veux.

Mais quand je l'aide:

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

Puis la sortie est 0. C'est tellement bizarre, une idée à ce propos?

Peut-on voir ton code HTML? Êtes-vous de la création de l'élément de façon dynamique?
Êtes-vous en l'appelant après l'élément dans le document, par exemple, après l'événement load?
Double Possible de document.getElementsByClassName('name') a une longueur de 0

OriginalL'auteur chrisTina | 2015-11-12

6

À l'aide de getElementsByClassName() sera de retour tous les éléments avec un nom de classe dans un document comme une NodeList. Cet objet représente une collection de noeuds qui peuvent être accessibles par des numéros d'index, qui commence à 0. Afin d'accéder aux éléments dans le NodeList, vous devrez utiliser une boucle.

Lorsque vous console.log(document.getElementsByClassName('gtableheader').length); vous voir 0 parce que lorsque vous le lancez, il n'y a pas d'élément avec la classe gtableheader. Vous êtes en mesure de voir les éléments de la console parce que document.getElementsByClassName() retourne un live collection est mise à jour lorsque de nouveaux éléments sont ajoutés.

Ainsi, dans le code que vous utilisez et la longueur est de 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

cela ne semble pas répondre à la question. Vous aussi référence à la longueur de la propriété de la nodeList retourné par getElementsByClassName -- vous venez de lire hors de la variable x que vous avez attribué à le résultat. Quand je lance document.getElementsByClassName('question').length à l'encontre de cette page, qui n'a qu'un seul élément avec la classe, le résultat est 1. Donc, vous n'avez pas à fournir une réponse à pourquoi la longueur de la propriété dans le cas des OP question renvoie 0.
Juste mis à jour ma réponse, merci pour le tuyau.
Oui, en fait, le vrai problème, c'est que j'essaie d'accéder à la element, avant de les charger, c'est pourquoi la longueur est 0.
Un autre problème est que element ne dispose pas d'un style de la propriété. Il fonctionne, mais l'IDE garde de se plaindre qu'il devrait être HTMLElement. Comment résoudre ce problème?
merci, juste un peu plus le code à l'intérieur du document prêt à fonctionner. mais c'est bizarre dans une logique de moyen var xyz= document.getElementsByClassName('xyz'); console.log(xyz); console.log(xyz.la longueur);. Je cède à obtenir les éléments du groupe d'abord, puis de lire la longueur de la variable, mais il renvoie toujours 0. c'est du javascript... 🙂

OriginalL'auteur Victor Luna
11

C'est parce que la getElementsByClassName renvoie une vivre collection. le length propriété de l'objet est 0 parce qu'à ce moment il n'y a pas d'élément avec un nom de classe dans les DOM. Depuis la console affiche le live de la représentation d'un objet, il affiche tous les éléments correspondants lorsque les éléments sont ajoutés à la DOM.

DOM analyseur analyse les documents à partir du haut vers le bas, quand il atteint une balise, il analyse et ajoute les DOM représentation de celui-ci (une instance de HTMLElement interface) pour le Modèle d'Objet de Document. Vous devez déplacer la balise de script à la fin de body tag ou écouter DOMContentLoaded événement qui est déclenché lorsque le document HTML a été complètement chargés et analysés.

OriginalL'auteur undefined

L'utiliser pour faire fonctionner

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

OriginalL'auteur nitsi

0

J'ai eu un problème similaire, mais les autres réponses ici ne conduit pas à ma solution. J'ai finalement réalisé qu'à l'époque, mon code est en cours d'exécution, le DOM n'était pas encore totalement construit, ainsi le tableau vide. Ce que je vois dans la console, un peuplé de tableau, a été ce qui a existé après le DOM a été entièrement formé et le script a été complète.

Ce qui a fonctionné pour moi a été de placer le code que nécessaire le tableau à l'intérieur d'un MutationObserver et jeu pour regarder codées en dur div contenant les sections qui serait généré dynamiquement (voir ce StackOverflow répondre et la MDN documentation).

Essayez ceci:
```
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();
};
```
OriginalL'auteur jamesthe500

Vous devez vous connecter pour publier un commentaire.