从getElementById(XXX)为null谈Dom加载

本文为学习司徒正美博文http://www.cnblogs.com/rubylouvre/p/4536334.html后总结得来

有时我们在运行getElementById(XXX)时，会发生异常，提示我们并没有这个元素。为什么？明明页面上有啊，怎么会提示没有该元素呢？

首先，弄明白，getElementById(）所获取的是什么?是DOM元素。而我们所说的“页面上有”是什么？是html代码中有。而html与DOM是不同的。DOM用于让我们可以对html代码进行操作，DOM树并非一开始就存在的，而是在我们运行html代码后从上到下，一个标签（文字）对应一个DOM树节点，一步一步构建完成的。（这里还有一点需要说明，并非几个标签就可以生成几个结点，有些标签在生成DOM树时，是会被自动忽略的，比如，table标签下面，只能有tr、td标签，若有其他标签，比如span，则在生成DOM树时就会被自动忽略，不会生成span标签所对应的DOM结点。）而在DOM树构建过程很有可能会由于某些html标签而堵塞，比如，在<script>标签中，若有src属性指向一个外部文件，则只有当外部文件被加载完，script标签所对应的DOM结点才会生成，接下来才能继续生成下面其它标签对应的DOM结点。因此，并不是html中存在标签，我们就一定能通过getElementById(XXX)获取到元素，只有当DOM树生成结束后，才能百分之百肯定获取到。如何判断DOM树是否生成完毕？有一个window.onload()方法，就是当DOM树生成完毕，且外部资源、图片等都加载好后，才会运行。我们可以将从getElementById(XXX)放在该方法内部，这样就可以保证，不会报错了 。