不能在 querySelector 上使用 forEach答案

【问题标题】：Can't use forEach on querySelector不能在 querySelector 上使用 forEach
【发布时间】：2020-12-28 17:33:58
【问题描述】：

我想使用延迟加载效果，在我的代码中一切正常，但是 querySelector 部分。

我在变量中存储了一些元素，我想在主题上应用观察者函数。

我还在 console.log 中打印每个输出以查看内容。

但是发生了这个错误：

未捕获的类型错误：imgs.forEach 不是函数

这是我的代码：

   const imgs = document.querySelector("[data-src]");

   const options = {
      threshold:1,
   };

   const observer = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
        let src = entry.target.getAttribute('data-src'); 
        if(!entry.isIntersecting){
            return;
        }
        entry.target.src=src;
        console.log(entry)
        observer.unobserve(entry.target);
    })

   },options)

   // Probleme is here
   imgs.forEach(img => {
    observer.observe(img);
   })

【问题讨论】：

querySelector() 将匹配第一个元素，而querySelectorAll() 将检索所有元素

标签： javascript

【解决方案1】：

尝试使用querySelectorAll 如下代码，

const imgs = document.querySelectorAll("[data-src]");

因为querySelector 将返回单个匹配元素，但querySelectorAll 将返回所有匹配元素的NodeList。

【讨论】：

【解决方案2】：

使用 querySelectorAll 来解决它

参考 mdn 文档

Document 方法querySelectorAll() 返回一个静态的（非实时） NodeList 表示与指定的选择器组。

而不是

   const imgs = document.querySelector("[data-src]");

试试这个

   const imgs = document.querySelectorAll("[data-src]");

【讨论】：

【解决方案3】：

虽然对于某些使用 querySelectorAll(selector).forEach() 的浏览器会起作用。但它是not supported by all browsers。因此，执行此操作的安全方法是使用 for 循环遍历 NodeList。所以你应该做这样的事情，

const imgs = document.querySelector("[data-src]");
// other coddes...
for(let i = 0; i<imgs.length; i++) {
   // your code.
}

我认为这将是最安全的方式。

【讨论】：

【解决方案4】：

Document.querySelector()

返回单个元素，不能循环遍历单个元素。

document.querySelectorAll()

返回括号中提供的类、id、标记名等所有元素。

【讨论】：