在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（）获取错误的元素（IE）

				
			

			

				

					IT与开发人员的地盘
				

				

					05-21
					
					944
					
				

			

		

		

			
				
问题  document.getElementById（）通过其名称选择一个元素。  浏览器  IE浏览器  例  相关的HTML代码：  [HTML] <输入名称=“测试”类型=“文本”值=“测试”> [/ HTML]  Javascript代码： varobj=document.getElementById("test");即使页面上不存在ID为“ test”的元素，也不会...

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					01-19
				

			

		

		

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

			
		

	



                


  
              

                


	

		

			

				
					
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对象的一些常见用法。

			
		

	





	

		

			

				
					
javascript封装document.getElementById()方法

				
			

			

				

					Molipc的博客
				

				

					11-08
					
					2252
					
				

			

		

		

			
				
//封装一个获取元素的fun
function byId(id){
	return typeof(id) === "string"?document.getElementById(id):id;	
}
因为Html中元素的id名称一般为字符串类型，所以用typeof判断其类型是否为string；
"==="叫做严格运算符，先判断数据的类型，相同的前提下在判断数据的值；

			
		

	





	

		

			

				
					
HTML    getElement等方法时未找到对象时的可能原因

				
			

			

				

					qq_39385997的博客
				

				

					10-12
					
					469
					
				

			

		

		

			
				
HTML getElement等方法时未找到对象时的可能原因

搜索的值不对应
如getElementById( bid )时，bid与body中元素所对应的id不对应，这自然找不到了。
函数不等所需资源加载完就直接调用

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;getElementId Test&lt;/title...

			
		

	





	

		

			

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

				
			

			

				

					09-03
				

			

		

		

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

			
		

	





	

		

			

				
					
封装document.getElementById(id)

				
			

			

				

					weixin_34239169的博客
				

				

					03-13
					
					250
					
				

			

		

		

			
				
 

CreateTime--2016年12月18日11:42:45Author:Marydon封装document.getElementById(Id)方法

&lt;script type="text/javascript"&gt;
    var xyhsoft = new Object();
    xyhsoft.dom = new Object();
    $Get =...

			
		

	





	

		

			

				
					
iframe使用contentDocument报错

				
			

			

				

					aishuxi7641的博客
				

				

					02-16
					
					419
					
				

			

		

		

			
				
今天调了一个bug是这样：要获取iframe内页面的document对象，以前使用了document.getElementById('iframeid').contentDocument.的这种形式，主要是这个页面很长时间都没动过了，前一阵子都还好好的，今天怎么就坏了呢。。。
 后来突然想到一个问题 “会不会是前一阵子调整网站的标准模式和非标准模式造成的？”
...

			
		

	





	

		

			

				
					
document.getElementById失效

				
			

			

				

					qq_40447680的博客
				

				

					09-30
					
					823
					
				

			

		

		

			
				
要在body后面书写js代码，不然获取不到对应的id



			
		

	





	

		

			

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

				
			

			

				

					qq_44731369的博客
				

				

					07-05
					
					1137
					
				

			

		

		

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

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

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

			
		

	





	

		

			

				
					
html返回值错误无法提交,form.submit()不能提交表单的错误原因及解决方法

				
			

			

				

					weixin_39899226的博客
				

				

					06-19
					
					421
					
				

			

		

		

			
				
直接上代码把：会员注册请认真填写以下内容用户名：密码：确认密码：m01.gif验证码：换一张表单数据提交到本页面，下面是js处理/*注册表单提交*/function formDeal(){var btnSubmit = document.getElementById('submit');var formId = document.getElementById('registerForm');btn...

			
		

	





	

		

			

				
					
Javascript 常用方法：document.getElementById(" ")

				
			

			

				

					weixin_33829657的博客
				

				

					12-21
					
					554
					
				

			

		

		

			
				
document.getElementById("") 返回对拥有指定id的第一个对象的引用。  <tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>  <tr>&lt...

			
		

	





	

		

			

				
					
$("#id") 和 document.getElementById('id')的区别

				
			

			

				

					学习小窝
				

				

					09-22
					
					1177
					
				

			

		

		

			
				
本来以为jquery中的$("#id")就是对js中的document.getElementById()的封装，今天一用才知道$("#id")是获取所有的id节点所以获取的是一个dom节点数组所以而id应该是唯一的所以想要获取id则应该是$(“#id”)[0]. 
而document.getElementById()则是找到这个dom节点

			
		

	





	

		

			

				
					
document.getElementById与document.getElementsById的区别

				
			

			

				

					花途Jasmine的博客
				

				

					06-02
					
					1万+
					
				

			

		

		

			
				
document.getElementById
是用Id选择元素，一个Id只对应一个元素。
document.getElementsById
是用元素名称选择元素一个元素名称可能有很多元素，取的是集，即不确定有几个才加s。

...

			
		

	





	

		

			

				
					
document.getelementbyid().value与document.getElementById().innerHTML的区别

				
			

			

				

					zhaoguxiaoshi的博客
				

				

					08-18
					
					2万+
					
				

			

		

		

			
				
document.getelementbyid().value与document.getElementById().innerHTML什么区别
 
使用document.getElementById()可以取到页面上一个有id的元素
然后访问这个元素的属性，比如value

当一个元素有value属性的时候，其value才会有值
例1

这样一个元素，当你使用document.ge

			
		

	





	

		

			

				
					
document.getElementById(‘username‘).value 是什么

				
			

			

				

					一季南凉的博客
				

				

					03-25
					
					727
					
				

			

		

		

			
				
js

			
		

	





	

		

			

				
					
document.getElementById("").value;值一直为空的原因！

				
			

			

				

					滴水石穿
				

				

					01-15
					
					9687
					
				

			

		

		

			
				
今天写个表单提交，检查值是否为空



不管怎么提交一直提示内容为空！懵逼了！

最后百度总算找到了原因！原来是页面打开的时候，chanpin的值就是空的，提交的时候肯定也还是空的，所以解决办法是，在点击提交的时候再去获取chanpin的值



然后就搞定了！！！
...

			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值