使用 querySelectorAll 的 Intersection Observer 引发 TypeError答案

【问题标题】：Intersection Observer using querySelectorAll throws a TypeError使用 querySelectorAll 的 Intersection Observer 引发 TypeError
【发布时间】：2020-04-05 20:50:52
【问题描述】：

我遇到了 Intersection Observer 问题。使用document.querySelectorAll('.entry') 会引发 TypeError：“未捕获的 TypeError：无法在 'IntersectionObserver' 上执行 'observe'：参数 1 不是 'Element' 类型。”

将document.querySelectorAll('.entry'); 更改为document.querySelector('.entry'); 可以解决问题并且可以正常工作。

我做错了什么？

基本的 HTML 结构：

<html>
<body>
  <div id="content-container">
    <div class="content">
      <div class="entry">Some content here on each entry</div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
      <div class="entry"></div>
    </div>
</div>
</body
</html>

JavaScript：

const blog = document.querySelectorAll('.entry');
const options = {
  root: null,
  rootMargin: '0px',
};

const observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } 

    else {
      console.log(entry);
    }
  });



}, options);


observer.observe(blog);

【问题讨论】：

标签： javascript html intersection-observer

【解决方案1】：

出现此问题是因为IntersectionObserver.observe() 只能观察到一个targetElement，但使用document.querySelectorAll() 您传递的NodeList 表示与指定选择器组匹配的文档元素列表。因此，您遇到了问题，但 document.querySelector() 只为您提供第一个匹配的元素，因此使用它时没有问题。

您可以通过遍历列表中的所有元素并单独观察每个元素来解决此问题，如下所示：

const blogs = document.querySelectorAll('.entry');
blogs.forEach(blog => observer.observe(blog));

【讨论】：

所以，现在我在尝试执行时遇到另一个错误：blogs.classList.add('entry-animation');。我收到一个错误“无法读取未定义的属性‘添加’”。我相信那是因为函数中没有 const “博客”？你会如何解决这个问题？谢谢。
简单。试试看：blogs.forEach(blog => blog.classList.add('entry-animation'));
我相信这会将课程附加到所有博客并且它们同时动画，但我们越来越接近了！
@palash，您对如何防止一次添加所有类有任何见解吗？当页面刷新时，所有类名为entry的div都同时加载了entry-animation。交叉路口观察者立即触发一切。请原谅我的无知，感谢您的帮助！
请为此创建一个新问题，以便我们可以一次针对一个问题并在此处发布问题链接。如果以后有时间，我会尝试研究一下。此外，如果可能的话，在该问题中添加一个小演示。如果您可以使用简单的演示重现问题，您将获得更多对问题的回复。