WebStorm环境下设置img元素src属性报Cannot set properties of null问题咨询

这个Cannot set properties of null (setting 'src')错误本质是JS执行时DOM树还未完成渲染，document.getElementById("img")没有找到对应ID的元素，返回了null，和WebStorm本身没有直接关系，差异来自不同环境的默认脚本加载时机。
你使用的在线环境通常默认会把JS代码放在<body>标签末尾执行，此时DOM已经加载完成，所以能正常找到img元素；而WebStorm默认生成的HTML模板如果将你写的JS代码放在了<head>标签里，或者脚本加载时没有做DOM加载完成的监听，就会触发这个错误。

你可以任选以下任意一种方案处理：

• 方案1：调整JS代码的放置位置
  把你的JS代码放到HTML文件中</body>结束标签的前面，确保所有DOM元素渲染完成后再执行JS代码，示例结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
    <img id="img" src="https://source.unsplash.com/random">
    <!-- JS放在body末尾 -->
    <script>
        let img = document.getElementById("img");
        img.src = "https://images.dog.ceo/breeds/terrier-toy/n02087046_3843.jpg";
    </script>
</body>
</html>

• 方案2：添加DOM加载完成监听
  如果需要把JS放在head标签里，可以给脚本添加DOMContentLoaded事件监听，等DOM加载完成后再执行操作：

document.addEventListener('DOMContentLoaded', function() {
    let img = document.getElementById("img");
    img.src = "https://images.dog.ceo/breeds/terrier-toy/n02087046_3843.jpg";
})

• 方案3：给script标签添加defer属性
  如果是外部引入的JS文件，给script标签加上defer属性，脚本会在DOM加载完成后自动执行：

<script src="你的JS文件路径" defer></script>

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