querySelectorAll返回空NodeList，星级评分active类无法切换求助

此前正常运行的星级评分代码在DOM改动后出现问题：JavaScript无法为点击的星星元素添加或移除active类，控制台打印stars返回空NodeList[]，这是功能失效的核心原因。已在<body>标签末尾添加带defer属性的<script src="script-landing.js"></script>确保脚本在DOM元素加载后执行，以下是排查方向：

• 检查DOM改动后星星元素的data-star属性是否被误删或修改：比如是否将属性名改为其他值，或意外移除了该属性
• 确认脚本执行时机是否覆盖动态DOM场景：如果星星元素是通过AJAX、前端框架等动态生成的，defer仅能保证初始DOM加载后执行脚本，此时动态元素尚未生成。可尝试将选择器与事件绑定代码包裹在DOMContentLoaded事件监听中，或改用事件委托（绑定事件到父元素.stars-rating-landing）
• 排查是否有其他脚本干扰：比如其他脚本可能删除了星星元素，或同名变量覆盖了stars导致其变为空
• 用浏览器开发者工具验证DOM存在性：在Elements面板搜索[data-star]，若搜索不到则说明DOM中确实无对应元素，需排查DOM生成逻辑；若能搜索到则需重新确认脚本执行时机
• 检查CSS选择器优先级（后续修复元素选择问题后）：确保.stars-rating-landing i.active的样式优先级足够覆盖默认样式

原代码参考 #

HTML

<div class="rating-box-landing">
  <header>Rate this book</header>
  <div class="stars-rating-landing">
    <i class="fa-solid fa-star" data-star></i>
    <i class="fa-solid fa-star" data-star></i>
    <i class="fa-solid fa-star" data-star></i>
    <i class="fa-solid fa-star" data-star></i>
    <i class="fa-solid fa-star" data-star></i>
  </div>
</div>

CSS

.stars-rating-landing i {
  width: 24px;
  height: 24px;
  color: #e6e6e6;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.stars-rating-landing i.active {
  color: #ff9c1a;
}

JavaScript

//Star Rating Box
//Select all elements with the "i" tag and store them in a NodeList called "stars"
const stars = document.querySelectorAll("[data-star]");
console.log(stars);

//Loop through the "stars" NodeList
stars.forEach((star, index1) => {
  //Add an event listener that runs a function when the "click" event is triggered
  star.addEventListener("click", () => {
    //Loop through the "stars" NodeList Again
    stars.forEach((star, index2) => {
      // Add the "active" class to the clicked star and any stars with a lower index
      // And remove the "active" class from any stars with a higher index
      index1 >= index2 ?
        star.classList.add("active") :
        star.classList.remove("active");
    });
  });
});

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