在JavaScript中使用document.getElementById()获取对象失败的原因

最新推荐文章于 2024-04-25 10:47:07 发布
最新推荐文章于 2024-04-25 10:47:07 发布
阅读量2.2w 收藏 8
点赞数 4
分类专栏： error 文章标签： getElementById getElementsByName JavaScript document getElementById.value
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18407565/article/details/70307685
版权

在JavaScript中使用以下方法

等等类似方法获取元素对象的时候，一定要切记：

一定一定要在你所要获取的元素对象加载以后才调用以上方法。否则根本获取不到该对象。

我在学习的时候就遇到了相似情况，纠结了好多时间：代码如下


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
     setTimeout(startCount,1000);
  }
//在此位置，我调用startCount方法的时候，最开始我使用的是直接调用
//startCount();
//结果死活不正确，最后使用下面方法延迟时间调用，其实我觉得延迟时间调用也不是很好，
//毕竟要是网站比较大，打开需要多少时间能加载好，还要看个人网速电脑等，
//1.要么把调用代码写在所要加载元素后面，这样就能保证元素先加载
//2.使用点击监听的事件来调用
setTimeout(startCount,1000);</script></head><body><form><input type="text" id="count" /></form></body></html>












                

        

        

    




    

      

        

            

              
                
                  SoneZQ
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    8
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
document.getElementById详解

				
			

			

				

					我的成长之路
				

				

					12-15
					
					3万+
					
				

			

		

		

			
				
注意： 
document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 
“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 
是具体的值！ 
  
参考资料： 
1. document . getElementById 的用法和 DHTML.CHM 的下载地址 
http://blog.sin...

			
		

	



                

              
                



	

		

			

				
					
document.getElementById获取控件对象为空的解决方法

				
			

			

				

					12-04
				

			

		

		

			
				
1.下面是一个简单的例子，页面加载时显示一段信息
 代码如下:<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><html>  <head>      [removed]          alert(“hello!!!”);      [removed]  </head>  <body onLoad=”showMessage()”>     

			
		

	



                


  
              

                


	

		

			

				
					
document.getElementById()方法使用

					
热门推荐

				
			

			

				

					酣睡的熊㊣的技术博客
				

				

					02-07
					
					36万+
					
				

			

		

		

			
				
document.getElementById使用
语法：oElement = document .getElementById ( sID )
参数：sID――必选项。字符串 (String) 。
返回值：oElemen――对象 (Element) 。
说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一

			
		

	





	

		

			

				
					
JavaScript中Document全局对象用法（附代码自行演示）

					
最新发布

				
			

			

				

					
				

				

					04-25
					
					1216
					
				

			

		

		

			
				
在JavaScript中，document对象是浏览器提供的一个全局对象，它代表了当前网页的整个HTML文档。document对象提供丰富的属性和方法，允许开发者与HTML文档的内容进行交互，包括查找、创建、修改、删除元素以及处理文档结构和样式等。以下个人总结document对象的一些常见用法。

			
		

	



		

			
		



	

		

			

				
					
HTML中嵌套的JavaScript语言 document.getElementById（“”）函数的使用

				
			

			

				

					qq_38261445的博客
				

				

					11-18
					
					5080
					
				

			

		

		

			
				
1.语法：var 变量 = document .getElementById (“某一个标签的ID名称”)
参数：某一个标签的ID名称――必选项，为字符串 (String) 。
如：
返回值：oElemen――对象 (Element) 。
	&amp;amp;lt;ol id=&amp;quot;ol&amp;quot;&amp;amp;gt;
		&amp;amp;lt;li&amp;amp;gt;aa&amp;amp;lt;/li&amp

			
		

	





	

		

			

				
					
JavaScript基础学习（一）

				
			

			

				

					Jenny_Ghost的博客
				

				

					11-14
					
					9525
					
				

			

		

		

			
				
一、API

ARI CApplication Programming lnterface,应用程序编程接口)是一生预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

API是给程序员提供的一种工具！以便能更加轻松的实现想要完成的功能。

二、WebAPI

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API( BOM 和 DOM)。

三、DOM

文档对象模型( Document ObjectModel，简

			
		

	





	

		

			

				
					
Vue3组件中使用ref解决GetElementById为空的问题

				
			

			

				

					zouxin_88的专栏
				

				

					12-01
					
					1342
					
				

			

		

		

			
				
今天遇到一个问题，就是在Vue3组件中需要获取template中的元素节点，使用GetElementById返回的却是null，网上查找了好些资料，才发需要使用ref。

			
		

	





	

		

			

				
					
document.getElementById获取不到对应值，返回NUll

				
			

			

				

					gigijingjing的博客
				

				

					06-20
					
					8381
					
				

			

		

		

			
				
问题：当把js文件引入位置放到head标签内，document.getElementById获取不到对应值，返回NUll；



原因：html代码执行顺序问题获取不到元素值；

解决办法：

第一种：加上defer属性。<script type="text/javascript" src="form.js" defer="defer"></script>

第二种：把...

			
		

	





	

		

			

				
					
TypeError document.getElementById(...) is null错误原因

				
			

			

				

					09-03
				

			

		

		

			
				
`TypeError: document.getElementById(...) is null` 是一个常见的JavaScript错误，通常出现在尝试访问一个尚未加载或者不存在于DOM（文档对象模型）中的元素时。这个错误表示`document.getElementById`方法未能找到...

			
		

	





	

		

			

				
					
JavaScript中也使用$美元符号来代替document.getElementById

				
			

			

				

					01-19
				

			

		

		

			
				
 上面的对于新版本的浏览器都是没有问题的，如果使用古老的浏览器，可以使用下面的函数 代码如下:function $(objectId) { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return ...

			
		

	





	

		

			

				
					
DOM 基础 ---------- 获取元素

				
			

			

				

					weixin_52212950的博客
				

				

					02-02
					
					6926
					
				

			

		

		

			
				
DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式

文档：一个页面就是一个文档，DOM 中用 document 表示

元素：页面中所有的标签都是元素，DOM 中用 element 表示

节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示

DOM 获取元素有很多方法，下面一一说明



一：document.getElementById()

此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID

			
		

	





	

		

			

				
					
document.getElementById

				
			

			

				

					xx_yan的博客
				

				

					03-28
					
					2万+
					
				

			

		

		

			
				
var element = document.getElementById(id);

因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。

无Id元素的查找可以使用CSS选择器 querySelector()

参数 id
大小写敏感的字符串，指代被查找元素
返回值 elemnt
一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。
注意

get...

			
		

	





	

		

			

				
					
js中document.getElementById()用法

				
			

			

				

					lyhmyway的专栏
				

				

					03-03
					
					6万+
					
				

			

		

		

			
				
dom标准里面的 
获取当前文档中指定id的元素
if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {
   alert("提示：请输入有效的认证码");
   document.getElementById("regjm1").focus();
   retur

			
		

	





	

		

			

				
					
js中的document.getElementById()失效的原因分析（大坑）

				
			

			

				

					风刘人物的博客
				

				

					08-07
					
					1万+
					
				

			

		

		

			
				
1.id写错，id要完全一样，大小写有差别都不行。 
2.最坑的一点，就是这个函数需要放在你这个id位置的后面，如果你把script标签放在head部分的话就可能会出现问题，因为document.getElementById()的使用需要把函数放在id的后面。所以，如果我们想避免这个问题，我们把js的引入放在body的最后面。...

			
		

	





	

		

			

				
					
jquery 给类名元素添加行内样式_Selenium元素定位不到？JS注入轻松搞定！

				
			

			

				

					weixin_39556811的博客
				

				

					11-21
					
					190
					
				

			

		

		

			
				
在使用Selenium做web自动化测试过程中，经常会遇到一些组件无法通过Selenium直接识别和处理，比如<input>标签组合的下拉框，比如日期控件。面对这些元素，我们可以引入JS注入技术来解决问题。JavaScript是一种被广泛用于Web前端开发的脚本语言 ,常用来为网页添加动态功能（弹窗，点击事件....）通过HTML DOM，JavaScript提供了页面对象获取和操作功...

			
		

	





	

		

			

				
					
document.getElementById()获取一直为null

				
			

			

				

					慕白Lee的博客
				

				

					10-20
					
					9825
					
				

			

		

		

			
				
document.getElementById()获取一直为null的最常见的一个原因是js文件在head标签里。直接使用$("#duang")同样可以获得对象进行一系列操作, 但是同样需要注意ID的正确性。产生的加载顺序问题，导致get不到节点的信息.

			
		

	





	

		

			

				
					
document.getElementBy系列方法获取不到对象

				
			

			

				

					weixin_44848356的博客
				

				

					02-13
					
					3217
					
				

			

		

		

			
				
getElementById取不到对象
在浏览器进行文档解析时是有顺序的，当页面加载完毕之前，或者说在相应的DOM对象加载完毕之前，对应的对象是不能获取到的。
看下面代码：
<script>
    var temp = document.getElementById("div");
    alert(temp);
</script>
<body>
<d...

			
		

	





	

		

			

				
					
document.getElementById获取不到值的几种原因分析

				
			

			

				

					java journey
				

				

					09-23
					
					5万+
					
				

			

		

		

			
				
前几天修改那个分页类，想加入跳转到指定页的功能，就是用户直接输入页码，点击按钮就可以跳到指定的页码！
    一看这个需求，就可以想到利用GET传值的方式，但常规GET方式需要把链接写入标签的a href里面，而我们实际上是希望用按钮来进行点击，而不是一个简单的超链接形式。于是

			
		

	





	

		

			

				
					
关于JS中引用全局变量出错的解决方法

				
			

			

				

					qq_44731369的博客
				

				

					07-05
					
					1137
					
				

			

		

		

			
				
近期做项目练习，在给元素添加绑定事件时，遇到了引用全局变量出错的问题，代码如下：
taskList.appendChild(taskEle);

其中 taskList 是全局变量，而上述代码封装于一个函数内，调试时出错：Cannot read property ‘appendChild’ of null  at addTask

这醒目的红色，真的使我停留了一会儿…那么，怎么办呢
这时候可以采用两种方法：
1、给整串代码加上 window . onload = function () {}
2、将 scr

			
		

	





	

		

			

				
					
await中使用document.getElementById获取元素

				
			

			

				

					06-07
				

			

		

		

			
				
在JavaScript中，可以使用async/await和Promise来异步获取元素，并且可以使用document.getElementById()方法来获取指定ID的元素。例如下面的例子：

```javascript
function getElementById(id) {
  return new Promise((resolve) => {
    const element = document.getElementById(id);
    resolve(element);
  });
}

async function example() {
  const element = await getElementById('myElement');
  console.log(element);
}
```

在上面的例子中，getElementById()方法返回一个Promise对象，然后在async函数中使用await来等待该Promise对象的返回结果，并将结果赋值给element变量。最后，我们可以在控制台中打印出element变量的值，该值应该是指定ID的元素对象。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值