HTMLCollection apparaissant dans la console avec de nombreux éléments, mais a une longueur 0

Question

Il y a un tas d'éléments de portée sur la page que je suis en train de saisir qui sont formatés comme ceci:

<div class="ca-evp1 te" style="color:#2952A3"> 
    <span class="te-t">11am&nbsp;</span> 
    <span class="te-s">Antoine Diel</span> 
</div> 

Alors, j'ai décidé de choisir les utiliser getElementsByClassName() puis itérer sur cette HTMLCollection, qui quand je vois dans la console développeur affiche 32 éléments, mais quand je vérifie la propriété de longueur est 0.

var toType = function(obj) { 
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() 
    } 
    var eventToClick = document.getElementsByClassName('te-s'); 
    console.log(eventToClick); // shows 32 elements 
    console.log(toType(eventToClick)); //htmlcollection 
    console.log(eventToClick.length); // 0...huh? 

Je dois manquer quelque chose avec la façon dont getElementsByClassName ou HTMLCollections dans le travail en général, mais je ne peut pas sembler comprendre par des docs ou Google à ce stade.

Pour autant que je comprends les choses, si je vois tous ces éléments de portée dans le cadre de la déclaration console.log, ils doivent contribuer à la longueur de la eventToClick HTMLCollection et je devrais pouvoir itérer dessus avec une boucle for, mais ça ne marche pas! Est-ce que la console de développeur effectue une sorte de sorcellerie ici, et je n'ai pas vraiment ces éléments dans le cadre d'un HTMLCollection?

Voici une version live afin que vous puissiez reproduire dans votre navigateur: http://danielschroedermusic.com/apps/cal-test/cal.html

Publier une seconde image des éléments de portée de la console pour l'une des personnes qui aident avec cette question.

Solution de travail, mais pas génial!

document.addEventListener('DOMContentLoaded', function(event) { 
    var intervalID = window.setInterval(myCallback, 50); 
    function myCallback() { 
    var eventToClick = document.getElementsByClassName('te-s'); 
    if (eventToClick.length > 0) { 
     console.log(eventToClick); 
     for (var i = 0; i < eventToClick.length; i++) { 
     console.log(eventToClick[i]); // 32 elements! 
     } 
     clearInterval(intervalID); 
    } 
    } 
}); 

Comme Harshal noté dans la réponse acceptée, je n'ai pas pu saisir les éléments parce que mon script exécutait avant leur chargement sur la page. Les scripts Google qui chargent ces données de calendrier sont vraiment complexes, et les parcourir avec le débogueur n'a pas permis de voir les éléments ajoutés de manière logique. J'ai donc essayé d'utiliser un timer d'intervalle pour vérifier la présence du éléments avec le nom de classe que je cherchais.

Cela semble faire l'affaire pour l'instant, je suis ouvert à des solutions plus gracieuses si vous en avez! recherche encore cette ...

Answer 1

Vous devez faire document.getElementsByClassName('te-s') après le calendrier est chargé.

Le 32 que vous voyez est correct. Il montre l'objet de HTMLCollection qui fait référence au tableau. Ainsi, lorsque le eventToClick est imprimé, il contient zéro valeur. Mettez un débogueur et voyez-le. Mais après que le calendrier est chargé le eventToClick vous montre toutes les valeurs. La raison pour laquelle la longueur est 0 est la même. La longueur indiquée est la valeur de transfert. Donc, quand vous l'avez demandé, la longueur était en réalité 0.

Il doit y avoir une fonction de rappel après le chargement du calendrier que vous pouvez utiliser pour obtenir la valeur correcte, vous pouvez obtenir la bonne longueur là-bas.

Si vous avez besoin d'aide dans ce laissez-moi savoir la bibliothèque de calendrier que vous utilisez, je serais ravi de la recherche sur elle.