JavaScript:Uncaught TypeError Cannot read property 'id' of null。

用JavaScript操作DOM时出现如下错误:

   Uncaught TypeError Cannot read property 'id' of null。

   Uncaught TypeError: Cannot read property 'className' of null。

例如:

<!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" />
<script language="javascript" src="jquery.js"></script>
<script>
var div=document.getElementById("divTest");
alert(div.id);
alert(div.className);
alert(div.title);
</script>
<style>
#divTest{
margin-top:30px;
margin-bottom:40px;
}
span{
border-color:#3C0;
border-style:solid;
margin-bottom:5px;
padding:10px 30px 10px 30px;
border-radius:10px
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="divTest" class="bd" title="body">
     <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
</body>
</html>

运行时出现如下错误:


 

  问题出在JS运行的时候你的页面还没有加载完成,所以你的JS代码找不到你的页面元素,就会抛出这个问题。解决办法就是把JavaScript代码放在body的最后,例如:

<!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" />
<style>
#divTest{
margin-top:30px;
margin-bottom:40px;
}
span{
border-color:#3C0;
border-style:solid;
margin-bottom:5px;
padding:10px 30px 10px 30px;
border-radius:10px
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="divTest" class="bd" title="body">
     <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
<script language="javascript" src="jquery.js"></script>
<script>
var div=document.getElementById("divTest");
alert(div.id);
alert(div.className);
alert(div.title);
</script>
</body>
</html>


 

你可能感兴趣的:(JavaScript,c,dom,TypeError,uncaught)