场景
控制台报错"Cannot read properties of null (reading 'addEventListener')"
Cannot read properties of 都是渲染错误 不能获取属性
错误原因
因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出 "undefined" 错误。
解决办法
addEventListener
放在绑定的元素添加渲染完成后再使用;- 使用
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
这段代码无效。