JavaScript 控制台报错 Cannot set property 'innerHTML' of null

问题：通过 document.innerHTML 改变 id="p1" 标签中的内容，代码如下。

          在浏览器中打开，控制台报错：“innerHTML属性为空”。

         

        

原因：在一个HTML文档中，javascript代码属于 通过作为标签引入的脚本，属于HTML的组成部分。

          浏览器按照 从上至下的文档执行顺序 解析页面结构。

          执行document.getElementById("p1").innerHTML = person.fullName();时，<p>标签还不存在。

解决方案：

         1.通过 window.onload 控制加载完页面后执行。

         

         2. <script>代码块放在<p>标签的后面。

         

其他：window.onload 和 jQuery中的$(document).ready的区别

         window.onload 需要等待页面元素全部加载完成 才能开始执行；

         $(document).ready 在DOM结构绘制完毕 就可以开始执行。