本文为学习司徒正美博文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)放在该方法内部,这样就可以保证,不会报错了 。