addEventListener函数报错，getElementById获取元素返回null如何解决

document.getElementById("mainDiv")返回null，本质是JS代码执行时，目标DOM元素还没被浏览器解析渲染到页面上。
你在浏览器控制台执行代码能拿到正确结果，是因为打开控制台操作的时候，整个页面已经加载完成，#mainDiv早就挂载到DOM树里了，查询自然不会返回空。
在本地VS Code环境运行时如果报错，基本都是script标签的位置不对：如果JS代码写在<head>里，或者放在<div id="mainDiv">元素的前面，浏览器从上到下解析HTML的过程中，跑到JS逻辑的时候还没解析到后面的div元素，查询结果自然是null，对null调用addEventListener就会直接抛出类型错误。

• 调整script标签位置：把JS代码挪到</body>闭合标签之前，保证所有DOM元素都解析完成后再执行JS逻辑，示例结构如下：

<body>
    <h3>Editable div</h3>
    <div id="mainDiv">

    </div>
    <!-- 所有DOM元素写在script前面 -->
    <script>
        let elem7=document.getElementById("mainDiv")
        console.log(elem7) // 正常输出div元素引用
        elem7.addEventListener('click',function(e){
            console.log("You Clicked")
        })  
    </script>
</body>

• 监听DOM加载完成事件：不想调整script位置的话，可以把DOM操作逻辑包裹在DOMContentLoaded事件回调里，等整个DOM树解析完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
    let elem7=document.getElementById("mainDiv")
    console.log(elem7)
    elem7.addEventListener('click',function(e){
        console.log("You Clicked")
    })
})

• 外部JS文件可以加defer属性：如果你的JS是单独的外部文件，给script标签加defer属性后，浏览器会异步加载JS文件，等DOM全部解析完成后再执行JS代码，就算把script放在head里也不会出现找不到元素的问题：

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

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