1、相信很多同学在开发过程中都会遇到
Cannot read property ‘innerHTML’ of null ——这个报错的字面含义是：不能读取空的内部HTML。
2、实际上，在页面的HTML结构中，innerHTML是有实际的值并可以在console进行获取查询到。
3、根据浏览器的渲染原理，HTML代码从上到下执行代码，当浏览器JS解析器解析到script并进行DOM操作，下面的DOM结构还没有进行搭建。那么就会提示不能正确读取内部的HTML信息。
4、解决思路：将涉及DOM读取部分的script放在DOM结构后面。标签前面。或者在前置的script标签写明：window.onload等，确保DOM树加载完毕后再执行这段script代码。
5、下面示例注释了顺序，可以理解一下
实例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('ranking');
if(Number(oDiv.innerHTML) <= 30){
alert('3ok'+oDiv.innerHTML);//3加载完成打印3
}
}
</script>
<script type="text/javascript">
var oDiv = document.getElementById('ranking');
if(Number(oDiv.innerHTML) <= 30){
alert('1ok'+oDiv.innerHTML); //1报错Uncaught TypeError: Cannot read property 'innerHTML' of null
}
</script>
<body>
<div class="row">
<div class="col-lg-12">
<div class="form-group mb-3">
<div class="form-control text-center" >您的积分总和为：9527 当前排名第<span id="ranking">30</span>位</div>
</div>
</div> <!-- end col -->
</div>
</body>
<script type="text/javascript">
var oDiv = document.getElementById('ranking');
if(Number(oDiv.innerHTML) <= 30){
alert('2ok'+oDiv.innerHTML); //2文本流顺序打印2
}
</script>
</html>
很有可能是js文件中调用了html中的某个节点，并且js在这个调用的对象之前加载了。
如果js放在头部时，此时浏览器渲染未进入dom节点，因为提示为空，或者找不到。
所以把js代码放到最后或调用的对象后面就行了。
补充：正确的写法应该是在请用对象之前作个判断。
if(document.getElementById(“id”)){
dosomething
}
————————————————
版权声明：本文为CSDN博主「csdn启程」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010233323/article/details/52096426
