使用querySelectorAll实现多圆形进度条时报getAttribute不存在错误如何解决

• document.querySelectorAll() 返回的是包含所有匹配元素的NodeList类数组集合，而非单个DOM元素，集合本身没有getAttribute方法，只有集合内的单个DOM元素支持该API，直接对circle变量调用getAttribute就会抛出你遇到的类型错误。
• 同理原代码中直接对circle设置style属性、对number设置innerHTML也会失效，因为这两个变量都是集合，不能直接操作单个元素的属性。

核心思路是遍历每一个进度条元素，和对应的百分比文本绑定，给每一组单独执行计数动画逻辑，修改后的JS代码如下：

const circles = document.querySelectorAll(".progress");
const numbers = document.querySelectorAll(".progress-percent");
const cir = 377;

// 按索引匹配每一组进度条与百分比文本，分别执行动画逻辑
circles.forEach((circle, index) => {
  // 读取当前进度条的目标值
  const targetVal = parseInt(circle.getAttribute("data-value"));
  const currentNumberEl = numbers[index];
  let counter = 0;

  // 每组进度单独绑定定时器
  const timer = setInterval(() => {
    if (counter === targetVal) {
      clearInterval(timer);
      return;
    }
    counter += 1;
    circle.style.strokeDashoffset = cir - (cir / 100) * targetVal;
    currentNumberEl.innerHTML = counter;
  }, 25);
})

原代码还存在clearInterval()未传入定时器ID的问题，修改后给每个定时器单独标记ID，清除时传入对应ID即可正常终止计时。

内容的提问来源于stack exchange，提问作者Alexi