在学习getElementById()方法的过程中出现了这样一个问题，便想记录下来。
分析问题之前，我们最好还是先来认识一下getElementById()方法。getElementById()方法，接受一个參数。获取元素的ID。假设找到对应的元素则返回该元素的HTMLDivElement对象，假设不存在。则返回null。
我是这样来实现的：
HTML代码：从代码中能够发现，我已经加入了<div id='box'>測试div</id>。
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM基础</title> <span style="color:#ff0000;"><script type ="text/javascript" src="demo.js"></script></span> </head> <body> <span style="color:#ff0000;"><div id='box'>測试div</id></span> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> </span>
<span style="font-size:18px;">var box=document.getElementById('box'); //获取id为box的元素节点
alert(box);</span>
正确的显示应该返回HTMLDivElement对象，为什么会出现nul呢？从HTML代码中能够看到。它先运行地是JS。然后才运行HTML，显然是顺序的问题。原因找到了。自然就有应对的方案。在这里教大家两种解决的方法：
1、将script调用标签移到html末尾。
修改HTML代码：
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM基础</title> </head> <body> <span style="color:#ff0000;"><div id='box'>測试div</id></span> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> <span style="color:#ff0000;"><script type ="text/javascript" src="demo.js"></script></span></span>
2、使用onload事件来处理
修改Js代码
<span style="font-size:18px;">window.onload=function(){
var box=document.getElementById('box'); //获取id为box的元素节点
alert(box); };</span>
但另一个显示的问题。
火狐、谷歌等浏览器等都会显示[object HTMLDivElement]，但只有IE浏览器会仅仅显示[object]。这是由于IE的全部对象都是以COM对象的形式实现的。
小结：
JS的知识点非常碎。假设仅仅是往前学而不加整理和总结。那么学着前面的知识，后面的知识就会忘掉。像上文总结的这样一个小问题，假设不记录总结，那么过不了多久就再也想不起来了。