HTMLCollection의 길이를 가지고 0

Question

과 같이 형식이 내가 잡기 위해 노력하고있어 페이지에 스팬 요소의 무리가 있습니다

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

그래서, 내가 선택하는 결정은 그들에게 나는 개발자 콘솔에서 볼이 HTMLCollection, 반복 다음 getElementsByClassName() 등을 사용하여 32 개 항목을 표시하지만 길이 속성을 확인하면 내가 어떻게 getElementsByClassName 또는 뭔가 누락되어야 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? 

입니다 HTMLCollection은 일반적으로 작동하지만, 이 시점에서 워드 프로세서 나 Google을 통해 알아낼 수 없습니다.

나는 CONSOLE.LOG 문의 일부로 그 스팬의 모든 요소를보고 있어요 경우 지금까지 내가 일을 이해, 그들은 eventToClick HTMLCollection의 길이에 기여해야하며, 내가 할 수 있어야한다 for 루프를 사용하여 반복 할 수는 있지만 작동하지 않습니다! 개발자 콘솔은 여기에 일종의 요술을 사용하고 있으며 HTMLCollection의 일부로 이러한 요소가 실제로 없습니까? http://danielschroedermusic.com/apps/cal-test/cal.html

을이 문제를 돕는 사람들 중 하나의 콘솔에서 스팬 요소의 두 번째 이미지를 게시 : 당신이 당신의 자신의 브라우저에서 복제 할 수 있도록

여기에 라이브 버전입니다.

대단한 해결책은 아닙니다. Harshal이 허용 대답에 언급 한 바와 같이

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); 
    } 
    } 
}); 

, 나는 그들이 페이지에로드되기 전에 내 스크립트가 실행 되었기 때문에 요소를 잡을 수 없습니다. 이 캘린더 데이터를로드하는 Google 스크립트는 실제로 복잡하며 디버거를 사용하여 단계별로 진행하면서 추가되는 요소를 논리적으로 볼 수있는 곳이 없었기 때문에 간격 타이머를 사용하여 내가 찾고 있던 클래스 이름을 가진 요소들.

지금 당장 트릭을 수행하는 것처럼 보이지만, 나에게는 더 훌륭한 해결책이 열려 있습니다! 여전히 ... 당신은 달력이로드 된 후 document.getElementsByClassName('te-s')을 할 필요가

Answer 1

을이 연구.

이전에보고있는 32 명이 맞습니다. 배열에 대한 참조 인 HTMLCollection의 객체를 보여줍니다. 그래서 eventToClick이 인쇄 될 때, 0 값을가집니다 .. 디버거를 넣고 그것을보십시오. 그러나 달력이로드 된 후에 eventToClick이 모든 값을 표시합니다. 길이가 0 인 이유는 같습니다. 표시된 길이는 값 별 전달입니다. 그래서 요청했을 때 길이는 실제로 0입니다.

올바른 값을 얻는 데 사용할 수있는 캘린더를로드 한 후에 콜백 함수가 있어야합니다. 올바른 길이를 얻을 수 있습니다.

이 날 당신이 사용하고있는 달력 라이브러리를 알려 도움을 필요로하는 경우에 대한 연구에 싶어요.