JS修改骰子图片代码控制台运行正常 编辑器报null错误是什么原因

该报错的核心是document.querySelector("img.img1")执行后返回了null，代码尝试调用null的setAttribute方法才触发了类型错误。

两种运行场景结果不同的原理 #

• 你在浏览器控制台手动执行代码时，页面DOM已经完全加载渲染完毕，对应img元素已经存在，因此可以正常选中元素执行方法
• 代码写入index.js文件运行时，代码执行时机早于DOM元素加载，浏览器按从上到下的顺序解析HTML文件，如果你的<script>标签引入位置在<img class="img1">元素之前（比如放在head标签内），执行JS代码时img元素还没有被解析到DOM树中，自然无法选中该元素。

你可以任选以下任意一种方式修复：

• 将index.js对应的<script>标签移动到HTML文件</body>结束标签之前，保证所有DOM元素解析完成后再加载执行JS代码
• 将JS代码包裹在DOMContentLoaded事件回调中，等DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector("img.img1").setAttribute("src", "images/dice1.png");
})

• 给引入index.js的<script>标签添加defer属性，让JS异步加载，等DOM解析完成后再执行：

<script src="index.js" defer></script>

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