报错“Cannot read properties of null (reading ‘addEventListener‘)“

场景

控制台报错"Cannot read properties of null (reading 'addEventListener')"

Cannot read properties of 都是渲染错误 不能获取属性

错误原因

因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。

解决办法

1. addEventListener 放在绑定的元素添加渲染完成后再使用；
2. 使用 window.onload 或 $(document).ready()

window.οnlοad=function(){
// code
};
$(document).ready(function () {
// code
});

只有点击事件,没有对象div和内容样式.aaa就会报错

.aaa {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
 
<div class="aaa"></div>
 
//4.事件处理程序中 this指的是事件源
    const AAA = document.querySelector('.aaa')
    AAA.addEventListener('click', function () {
      this.style.backgroundColor='red'
      console.log(AAA === this);    // 点击后返回true
    })

1.没有<div class="aaa"></div>所以没有拿到dom节点

2. 没有.aaa渲染不了.都会报错  事件内容没有也不行

在vue里  

在使用monaco.editor.create方法是没有拿到dom节点，也就是this.$refs.monacoDom这段代码无效。

async hangeVisible() {
const { monaco } = await import('./customMonaco');
if (!this.editor) {
  this.editor = monaco.editor.create(this.$refs.monacoDom, {
theme: this.curTheme,
automaticLayout: true,
language: this.language
  });
}
       ···
}

没有拿到dom节点，也就是this.$refs.monacoDom这段代码无效。

解决办法
检查dom元素上绑定的 ref 的拼写是否与函数中的一致。
注意你使用的是 vue2 还是 vue3 ，vue2使用this.$refs.xxx拿到dom元素，vue3需要先声明一个变量并 return 出去，还要在 dom 元素上以该变量名绑定 ref。
使用vue3还需注意拿 dom 节点的时机，因为 vue3 会先执行一遍 setup 函数，此时还没有 dom 所以需要使用 nextTick 。
 

方法是没有拿到dom节点，也就是this.$refs.monacoDom这段代码无效。