javascript document.queryselector（）isn＆＃x27; t识别html的元素

发布于 2025-01-25 21:05:04 字数 877 浏览 7 评论 0原文

我正在尝试将卷轴触发的动画添加到我的在线投资组合网站，在我的经验列表之间，我的简单div作为分离器：

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

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

我的JS如下：

//Scroll triggered animations
    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);
    })

console.log（）带有QuerySelectorall的语句正在返回一个空节点，即使我的分隔线直接放置在HTML中，所以我不确定为什么我的QuerySelector不确定我认识他们。

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

原文

I am trying to add scroll-triggered animations to my online portfolio website, and between my experience listings I have simple divs just as separators:

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

that I am trying to add entrance animations to.

My JS is as follows:

//Scroll triggered animations
    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);
    })

The console.log() statement with the querySelectorAll is returning an empty NodeList even though my dividers are placed in the HTML directly, so I'm unsure why my querySelector isn't recognizing them.

I'm suspicious that the JS is executing before the the elements are fully loaded, but I haven't had success with several different wait methods for that.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Oo萌小芽oO 2025-02-01 21:05:04

即使将脚本放在底部，也要确保在加载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>

Even if you are placing the script at the bottom make sure it gets executed after the DOM is loaded.

Also, it's forEach, not 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);