javascript中document.getelementbyid缺少对象的问题原因

最新推荐文章于 2025-05-26 15:54:59 发布

原创最新推荐文章于 2025-05-26 15:54:59 发布 · 置顶 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#document.getelementb #缺少对象

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个JavaScript代码示例展示了浏览器加载过程中可能出现的问题。当尝试访问未完全加载的DOM元素时，会导致脚本执行失败。通过调整脚本执行时机，确保DOM元素已加载完成后再进行操作，可以有效避免此类错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这段代码浏览器端运行时会报错：缺少对象

原因是：在还未加载img对象前就试图通过它的id得到img对象。

  从这个错误就可以看出Javascript和html的一些特性。

下面是报错的代码段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="mario.css" /> 
<head>
   <script language="javascript"> 
      
			var mymario=document.getElementById('mymario'); 
			window.alert(mymario.style.top);
		
          
        </script>  
</head>
<body>
 <div class="gamediv">  
            <img id="mymario" src="i2.png" style="left:100px; top:50px; position:absolute;" /> <!--用到了绝对定位-->  
        </div> 
		
</body>
</html>

修改后

下面这段代码不会报错。原因：加载完img之后再通过它的id得到img对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="mario.css" /> 
<head>
   <script language="javascript"> 
        function show(){
			var mymario=document.getElementById('mymario'); 
			window.alert(mymario.style.top);
		}
          
        </script>  
</head>
<body>
 <div class="gamediv">  
            <img id="mymario" src="i2.png" style="left:100px; top:50px; position:absolute;" /> <!--用到了绝对定位-->  
        </div> 
		
</body>
</html>

注：源代码片段来自传智播客韩老师的课堂代码。错误为本人遇到。觉得很有价值，和大家分享