为什么使用querySelectorAll获取元素后调用addEventListener会报不是函数的错误？

• document.querySelectorAll() 方法返回的是NodeList类数组集合，并非单个DOM元素，该集合本身没有内置addEventListener方法，只有单个DOM节点才支持调用该方法绑定事件。
• 选择器规则使用错误：你用[image]、[score]这种属性选择器，匹配的是带有image、score自定义属性的元素，但你的HTML代码中对应元素是用class="image"、class="score"标注的，现有选择器无法匹配到任何DOM节点，就算修改绑定逻辑也不会生效。
• 你的HTML代码存在大量截断问题，比如div闭合标签写成</di，head区的meta、script、link标签均不完整，实际运行时也会引发页面加载异常。

首先修改JS代码如下：

// 把属性选择器改为类选择器，正确匹配对应DOM元素
const score = document.querySelector(".score");
const imageList = document.querySelectorAll(".image");

// 遍历NodeList集合，给每个图片元素单独绑定点击事件
imageList.forEach(image => {
  image.addEventListener("click", () => {
    // 优化分数逻辑：转数字累加，避免字符串拼接出现"1111"这类异常展示
    score.innerHTML = Number(score.innerHTML || 0) + 1;
  });
})

额外修复要点：

• 补全HTML中所有截断的标签，比如把</di改为</div>，补全meta、script、link标签的闭合与属性值，保证页面正常加载。
• 如果需要保留属性选择器的写法，就要给对应DOM元素加上对应属性，比如<div image class='image'></div>、<div score class='score'></div>，但更推荐用类选择器匹配样式类元素。

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