脚本内console.log与浏览器控制台输出carousel_item数量不一致求助

问题原因 #

你将JS脚本放在了<head>标签内引入，浏览器解析HTML是从上到下的顺序，脚本执行时<body>内的DOM节点还没有完成渲染，因此document.getElementsByClassName('carousel_item')无法匹配到任何元素，输出长度为0。
当你手动在浏览器控制台执行语句时，页面已经完成了全量DOM渲染，因此可以正确获取到4个元素的长度。

解决方法 #

你可以选择以下任意一种方案修复问题：

• 调整脚本引入位置：将<script src="Carousel.js"></script>从<head>标签内移动到</body>闭合标签的前一行，确保DOM全部解析完成后再执行JS逻辑
• 监听DOM加载完成事件：将所有JS逻辑包裹在DOMContentLoaded事件回调中，示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  let curr_pos = 0;
  const slide = document.getElementsByClassName('carousel_item');
  console.log(slide.length);
  // 后续轮播图逻辑统一放在此处
})

• 给script标签添加defer属性：修改head内的脚本引入代码为<script src="Carousel.js" defer></script>，defer属性会告知浏览器该脚本需要等HTML文档解析完成后再执行，不会阻塞页面渲染。

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