1、相信很多同学在开发过程中都会遇到
Cannot read property 'innerHTML' of null ——这个报错的字面含义是:不能读取空的内部HTML。
2、实际上,在页面的HTML结构中,innerHTML是有实际的值并可以在console进行获取查询到。
3、根据浏览器的渲染原理,HTML代码从上到下执行代码,当浏览器JS解析器解析到script并进行DOM操作,下面的DOM结构还没有进行搭建。那么就会提示不能正确读取内部的HTML信息。
4、解决思路:将涉及DOM读取部分的script放在DOM结构后面。</body>标签前面。或者在前置的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>
运行实例 »
点击 "运行实例" 按钮查看在线实例