Comment obtenez-vous des éléments à partir d'un javascript HTMLCollection

Je ne comprends pas pourquoi je ne peux pas obtenir les éléments d'un HtmlCollection. Cet exemple de code:

 var col = (document.getElementsByClassName("jcrop-holder"));
 console.log(col);

produit de cette sortie sur la console:

Je vais essayer d'obtenir la dic.jcrop porte-objet, mais je ne peux pas l'obtenir à partir de ma variable col. Rien de tout cela fonctionne:

  console.log(col[0]); //undefined
  console.log(col.item(0)); //null

  //check length of collection

  console.log(col.length); //0

Donc, si la longueur est de 0 pourquoi la console de montrer une longueur de 1, ainsi que les objets à l'intérieur? Quand j'ai ouvert le nœud qu'il contient des enfants. Ce qui se passe?

Voici quelques nœuds développés. Je n'ai pas d'élargir div.jcrop.titulaire car il est trop long. Ici sont les enfants des éléments:

Comment obtenez-vous des éléments à partir d'un javascript HTMLCollection

Essayez document.getElementsByClassName("jcrop-holder")[0] et document.querySelector(".jcrop-holder")
Vous devez nous montrer ton code complet (ou au moins la partie que vous utilisez console.log et celui où vous essayez de l'utiliser. Vous avez l'impression de changer de classe entre le moment où vous vous connectez à la console et le temps que vous essayez de l'utiliser.
getElementsByClassName renvoie un live collection. Le petit bleu i dans la console indique que le tableau sera évaluée lorsque vous développez. Il y a clairement quelque chose qui se passe entre vous de la récupération de la collecte et de l' console.loging les propriétés, et vous en fait l'inspection de la collection dans la console.
Un avis, que console fonctionne de manière asynchrone. Essayez de changer quelque chose dans col[0] en dépit de la console en disant que c'est undefined.
Je suis confronté à la même question, une autre réponse à cette question ?

OriginalL'auteur Michał Ziembiński | 2015-10-02

javascript

9

Prises à partir de : Ne peut pas accéder à la valeur de HTMLCollection

Le problème, c'est que vous avez placé le script dans l'en-tête qui sera exécuté avant les éléments html sont chargés, donc getElementsByClassName() ne retourne pas tous les éléments.

Une solution est d'attendre pour les éléments html à charger, puis d'exécuter le script, pour cela, vous pouvez utiliser la fenêtre des objets de l'événement load de
```
window.addEventListener('load', function () {
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
})
```
Ou vous pouvez placer votre script en bas de l'élément de corps de la place de la tête, de sorte que par le temps que le script est interprété et exécuté les éléments sont chargés dans les dom

OriginalL'auteur jasminejeane
0

J'ai été confrontée au même problème et la solution à ce problème était de mettre mon script à la fin du document, afin d'attendre pour que tout le document soit chargé avant de commencer à changer, ou en sélectionnant le HTMLCollection éléments.
Espérons que cela aide.

OriginalL'auteur Greenish

look de ce code, avec elle, vous pouvez utiliser un attribut de classe pour un HTMLColletion

  var eles = document.getElementsByClassName('className');
    for (let i = 0; i < eles.length; i++) {            
            eles[i].addEventListener('click',function(){
                //code ex. eles[i].querySelector(".contenedor").classList.toggle('ocultar');
                //code here...
            })

    }

OriginalL'auteur albertto

Vous devez vous connecter pour publier un commentaire.