title: element.getBoundingClientRect is not a function
body: <p>Why does it said that <code>element.getBoundingClientRect is not a function</code>?  I really don't know what to do.</p>
  <p>Here is my JS:</p>
  <pre class="lang-js prettyprint-override"><code>const elementsFadeIn = document.querySelectorAll(&quot;.fade-in&quot;);
  window.addEventListener(&quot;scroll&quot;, fadeIn);
  function fadeIn() {
    for (i in elementsFadeIn) {
      let element = elementsFadeIn[i];
      let viewElement = element.getBoundingClientRect().top - window.innerHeight + 20;
      if (viewElement &lt; 0) {
          element.classList.add(&quot;view-element&quot;);
      } 
      else {
          element.classList.remove(&quot;view-element&quot;);
      }
    }
  }
  </code></pre>
  <p>and my css code:</p>
  <pre class="lang-css prettyprint-override"><code>.fade-in {
     transform: translateY(50px) translateZ(0);
     transition-delay: 0.7s;
     transition: 1s;
     opacity: 0;
  }
       
  .view-element{
    opacity: 1;
    transform: translateY(0px) rotate(0deg) translateZ(0);
  }
  </code></pre>