在学习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.οnlοad=function(){
var box=document.getElementById('box'); //获取id为box的元素节点
alert(box); };</span>
小结:
JS的知识点很碎。如果只是往前学而不加整理和总结。那么学着前面的知识,后面的知识就会忘掉。像上文总结的这样一个小问题,如果不记录总结,那么过不了多久就再也想不起来了。