javascript - node.getElementsByClassName 在不同位置的不同行为

Question

放置在特定位置的语句 console.log(document.getElementsByClassName("buttonQ")[0]); 会成功执行，但放置在另一个特定位置时执行未定义的相同语句。

这是怎么回事？

这两个位置的语句都通过代码中的注释进行标记

    //quotes
    (function(){

      window.addEventListener("load", makeRequest);

      function makeRequest(){ 
        //-----the below statement "console.log" executes succesfully----
        console.log(document.getElementsByClassName("buttonQ")[0]); 
        document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest);
        function reqListener() {
          if(httpR.readyState === XMLHttpRequest.DONE) {
            var quote;
            if(httpR.status === 200) {
                quote = JSON.parse(httpR.responseText);
              document.getElementsByClassName("quote")[0].innerHTML = quote[0].body;
            } else {
              alert("There was a problem with the request!")
            }
          }
        }    
        var httpR;
        httpR = new XMLHttpRequest();
        httpR.onreadystatechange = reqListener
        httpR.open("GET", "https://quote-api.glitch.me/pull/1", true);
        httpR.send();
      }

      //----------------------tweet-------------------

      //------the below statement "console.log" gives the result "undefined"----
      console.log(document.getElementsByClassName("buttonQ")[0]);


      //document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
      function tweetEvent() {
        document.getElementsByClassName("quote")[0].normalize();
        var tweetToShare = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
        var urlForTweetButton = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href");
        urlForTweetButton = urlForTweetButton + "?hashtags=quotes&text=" + encodeURIComponent(tweetToShare);
      }

    })();

Answer 1

您在文档加载时调用 MakeRequest，而其他语句则在文档加载完成之前调用。因此，此时 DOM 上可能还没有 .buttonQ 元素。