调用document.querySelectorAll查询.selected_icon返回空NodeList问题咨询

核心问题原因 #

• 90%以上的这类问题都是JS执行时机早于DOM渲染完成导致的：如果你的JS代码放在<head>标签内，或者写在目标HTML元素的上方，代码运行时浏览器还没解析到后面带selected_icon类的DOM节点，querySelectorAll自然返回空NodeList。
• 次要排查项：确认类名拼写完全匹配，大小写、拼写错误也会导致选择失败（你HTML里最后一个selected_icon类名后多了空格，浏览器解析类名时会自动忽略首尾空格，不会影响选择结果）。

修复方案 #

方案1：调整JS代码位置 #

把JS代码放到所有HTML内容的后面、</body>结束标签之前，保证DOM完全解析后再执行选择逻辑：

<body>
  <!-- 你的原有HTML代码 -->
  <div class="menu-icon-bar">
    <div class="material-icons menu-icon select selected_icon" > format_bold</div>
    <div class="material-icons menu-icon select selected_icon">format_italic</div>
    <!-- 其余HTML内容不变 -->
  </div>
  <!-- JS代码放底部 -->
  <script>
    var selector = document.querySelectorAll('.selected_icon');
    console.log(selector);
  </script>
</body>

方案2：监听DOM加载完成事件 #

如果JS代码必须放在HTML前面，把逻辑包裹在DOMContentLoaded事件回调中即可：

document.addEventListener('DOMContentLoaded', function () {
  var selector = document.querySelectorAll('.selected_icon');
  console.log(selector);
});

该事件会在浏览器完成整个DOM树解析后触发，此时所有静态元素都已存在，可正常被选中。

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