使用querySelectorAll批量为元素添加多属性及报错解决

嘿，我明白你遇到的问题了！你说得完全没错——querySelectorAll返回的是一个静态NodeList集合，不是单个DOM元素，所以直接在这个集合上调用setAttribute肯定会报那个类型错误，因为集合本身没有这个方法，必须遍历集合里的每一个元素，对单个元素执行属性设置才行。

先看你代码里的小细节：你的setMultipleAttributes函数里，用的是外部的eleAttributes变量，而不是传入的attributesToSet参数，这会导致函数失去通用性，逻辑上也有点冗余。不过核心报错原因还是没正确处理NodeList的遍历（你后来写的for循环其实是对的，可能是之前没加循环时触发的报错？）。

我给你修正后的完整代码，同时优化了遍历方式，让代码更简洁：

修正后的JavaScript代码 #

function theLazyLoader () {
  const eleAttributes = {
    loading: 'lazy',
    class: 'lazy-load-spinner',
  };
  
  // 修正函数逻辑，使用传入的属性参数
  function setMultipleAttributes(elmnt, attributesToSet) {
    Object.keys(attributesToSet).forEach(attrName => {
      elmnt.setAttribute(attrName, attributesToSet[attrName]);
    });
  }
  
  var elements = document.querySelectorAll(".lazy-load-wrapper img");
  
  // 方式1：你原来的for循环（完全可行）
  // for(var i = 0; i < elements.length; ++i){
  //   setMultipleAttributes(elements[i], eleAttributes); 
  // }

  // 方式2：用forEach遍历，代码更简洁
  elements.forEach(element => {
    setMultipleAttributes(element, eleAttributes);
  });
}
theLazyLoader();

CSS代码（保持不变） #

img {
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

.lazy-load-spinner {
  background: url("https://cdn.pixabay.com/animation/2023/10/10/13/27/13-27-45-28_512.gif") center center/100px 100px no-repeat #F1F1FA;
}

HTML代码（保持不变） #

<div class="lazy-load-wrapper">
  <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
  <img src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
</div>

关键知识点总结： #

• querySelectorAll返回的NodeList是类数组集合，不能直接调用单个DOM元素的方法（比如setAttribute），必须遍历每个元素。
• 遍历NodeList的方式有很多：传统for循环、forEach（现代浏览器原生支持）、或者展开成数组[...elements].forEach(...)兼容更老浏览器。
• 函数内部尽量使用传入的参数，避免依赖外部变量，这样函数更灵活可复用。

备注：内容来源于stack exchange，提问作者clarkf