如何获取class为stick的div元素索引？转数组后交互报undefined

首先要确认你获取DOM元素的时机是否正确——必须等DOM完全加载完成后再执行代码，不然会因为元素还没渲染导致获取到空集合，后续操作自然返回undefined。

正确实现方式 #

方式1：用DOMContentLoaded事件确保DOM加载完成 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有class为stick的元素
  const sticks = document.querySelectorAll('.stick');
  // 转换为数组
  const stickArray = [...sticks];
  // 通过索引引用元素
  console.log(stickArray[0]); // 第一个.stick元素
  console.log(stickArray[1]); // 第二个.stick元素
});

方式2：把脚本放在页面底部（标签前） #

<!-- 页面内容 -->
<div class="stick active"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>

<script>
  const sticks = document.querySelectorAll('.stick');
  const stickArray = Array.prototype.slice.call(sticks);
  // 测试索引引用
  console.log(stickArray[2]); // 第三个.stick元素
</script>
</body>

常见错误排查 #

• 若在<head>里直接写脚本，DOM元素还没被解析，querySelectorAll会返回空的NodeList，转数组后也是空数组，访问索引自然得到undefined。
• 确认选择器拼写正确：.stick是class选择器，别误写成#stick（ID选择器）或其他格式。
• 检查class名拼写：确保目标元素的class确实是stick，没有拼写错误。

内容的提问来源于stack exchange，提问作者al.orl