JavaScript querySelectorAll无法选中careerPoints类返回undefined问题

问题原因 #

• 类选择器语法错误：使用querySelector/querySelectorAll选择类名时，需要在类名前加.前缀，你原代码中的"careerPoints"是标签选择器，只会匹配<careerPoints>这类自定义标签，页面不存在对应标签所以获取结果不符合预期。
• 返回值用法错误：querySelectorAll返回的是类数组的NodeList集合，本身没有text属性，需要遍历集合中的每个元素单独获取文本；DOM元素获取文本内容的标准属性为textContent，不是text。
• 补充说明：querySelector本身的设计逻辑就是仅返回第一个匹配到的元素，所以写法正确的前提下只能拿到第一个对应元素是正常表现。

修正方案 #

将script部分的代码替换为如下内容即可获取所有careerPoints类元素的文本：

// 加.前缀标识为类选择器，获取所有匹配的元素
const careerPointsEls = document.querySelectorAll(".careerPoints");
// 遍历打印每个元素的文本内容
careerPointsEls.forEach(item => {
  console.log(item.textContent);
})

// 如果需要把所有数值存入数组，可使用如下写法
const pointsList = Array.from(careerPointsEls).map(item => item.textContent);
console.log(pointsList);

你当前把脚本放在body末尾的写法是合理的，执行时循环生成的DOM已经全部渲染完成，不需要额外监听DOM加载事件。

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