【JavaScript】关于Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)报错

问题:

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')的意思是 未捕获的TypeError:不能设置null属性(设置'innerHTML') 。

错误代码:

输出内容:执行getElementById.innerHTML时找不到demo的内容,找不到你想将所写的HTML代码插入的地方。如图示:

 

分析原因:

此问题涉及到HTML中Javascript脚本的加载和执行,浏览器总是从上到下加载整个 HTML DOM。任何写在标签内的 js 代码都会被浏览器渲染引擎执行,甚至在加载整个body 标签内的各种 HTML 元素标签之前。当执行到innerHTML这一行代码时,并没有加载到下面的DOM结构,所以就会报错无法读取HTML。

DOM文档加载步骤: 

  1. 解析HTML结构 
  2. 加载外部的脚本和样式文件 
  3. 解析并执行脚本代码 
  4. 执行$(function(){})内对应代码 
  5. 加载图片等二进制资源 
  6. 页面加载完毕,执行window.onload

解决方法:

方法一:将js放在底部,等浏览器自上往下完全加载完DOM后,再执行js脚本就不会出现空引用。

代码示例:

 输出结果:

 方法二:使用事件挂钩 window.onload,在原本的script标签中添加window.onload,让浏览器加载完成DOM后再执行脚本。

代码示例:

 输出结果:

 参考链接:HTML中Javascript脚本的加载和执行_Cassie's blog-CSDN博客_html执行js代码

javascript - Cannot set property 'innerHTML' of null - Stack Overflow

猜你喜欢

转载自blog.csdn.net/aDiaoYa_/article/details/122506390
今日推荐