Sac*_*lic 5 html javascript 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);
pal*_*aѕн 10
发生此问题的原因IntersectionObserver.observe()是只能观察一个targetElement，但使用document.querySelectorAll()时传递的是一个 NodeList，该 NodeList 表示与指定的选择器组匹配的文档元素列表。因此，您遇到了问题，但document.querySelector()只提供了第一个匹配的元素，因此使用它时没有问题。
您可以通过循环遍历列表中的所有元素并单独观察每个元素来解决此问题，如下所示：
const blogs = document.querySelectorAll('.entry');
blogs.forEach(blog => observer.observe(blog));