JavaScript document.querySelector() 无法识别 HTML 中的元素

Question

我正在尝试将滚动触发的动画添加到我的在线作品集网站，并且在我的经验列表之间我有简单的 div 作为分隔符：

<div class='divider'></div>

我正在尝试添加入口动画。

我的JS如下：

<div class='divider'></div>

即使我的分隔符直接放置在 HTML 中，带有 querySelectorAll 的语句console.log()也会返回一个空的 NodeList，所以我不确定为什么我的 querySelector 无法识别它们。

我怀疑 JS 是在元素完全加载之前执行的，但我还没有成功使用几种不同的等待方法。

Answer 1

即使您将脚本放在底部，也要确保它在 DOM 加载后执行。

另外，它是forEach，而不是 foreach 。

window.addEventListener("DOMContentLoaded", function() {
  const obs = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      console.log(entry);
      if (entry.isIntersecting) {
        entry.target.classList.add('divider-animation');
      }
    });
  });

  console.log(document.querySelectorAll(".divider"));

  const dividerList = document.querySelectorAll(".divider");

  dividerList.forEach(divider => {
    obs.observe(divider);
  })
}, false);

<div class='divider'></div>