标签：javascript null
在学习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>
小结：
JS的知识点很碎。如果只是往前学而不加整理和总结。那么学着前面的知识，后面的知识就会忘掉。像上文总结的这样一个小问题，如果不记录总结，那么过不了多久就再也想不起来了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：javascript null
原文地址：http://blog.csdn.net/qwlzxx/article/details/46943185
