IE的document.getElementById混淆name和id属性的BUG

最新推荐文章于 2021-07-27 18:05:25 发布
最新推荐文章于 2021-07-27 18:05:25 发布
阅读量4.2k 收藏
点赞数
分类专栏： web前端 文章标签： ie javascript function 浏览器 input user

BUG演示

页面演示在这里,代码在下面

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>IE document.getElementById BUG DEMO</title> 
  6. </head> 
  7.  
  8. <body> 
  9. <script language="javascript"> 
  10. /*  
  11.     IE document.getElementById BUG 演示DEMO  
  12.     作者:朦朧中的罪惡  
  13.     博客:http://be-evil.org  
  14. */  
  15. function changeValue()  
  16. {  
  17.     var username = document.getElementById('username');  
  18.     username.value = 'Whahaha';  
  19. }  
  20. </script> 
  21. <form action="IE_BUG2.html" method="get"> 
  22. <p>name:<input type="text" name="username" /></p> 
  23. <p>name2:<input type="text" id="username" name="name" /></p> 
  24. <p><input type="button" value="改变" onclick="changeValue();" /></p> 
  25. </form> 
  26. </body> 
  27. </html> 
 

 
 

很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象. 
 

 
 

 
 

 
 

如何避免这个问题?
 

 
 

方法一：尽量避免在页面中出现name与id属性相同的对象
 

 
 

方法二：利用JavaScript的特点,重写document.getElementById
 

 
 

下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里,这里非常感谢他的文章给我作参考!
 

 
 

1.首先初步的尝试复写document.getElementById的方法
 

 
 

 

  1. if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器  
  2. {  
  3.     document.nativeGetElementById = document.getElementById;  
  4.     document.getElementById = function(id)  
  5.     {  
  6.         var elem = document.nativeGetElementById(id);  
  7.         if(elem)  
  8.         {  
  9.             //确定id相同  
  10.             if(elem.id == id)  
  11.             {  
  12.                 return elem;  
  13.             }  
  14.             else 
  15.             {  
  16.                 //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素  
  17.                 for(var i=1;i<document.all[id].length;i++)  
  18.                 {  
  19.                     if(document.all[id][i].id == id)  
  20.                     {  
  21.                         return document.all[id][i];  
  22.                     }  
  23.                 }  
  24.             }  
  25.         }  
  26.         return null;  
  27.     };  
  28. } 
 

 
 

看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute()方法的问题.
 

 
 

看代码:
 

 
 

 

  1. <html> 
  2.     <head> 
  3.         <title>Demonstrate IE7 getAttribute() bug</title>   
  4.     </head> 
  5.     <body> 
  6.         <form id="myForm1"> 
  7.             <input id="user_id" name="user_id" value="text" /> 
  8.         </form> 
  9.         <form id="myForm2"> 
  10.             <input id="id" name="id" value="text" /> 
  11.         </form> 
  12.         <script type="text/javascript"> 
  13.             var formElement1 = document.getElementById('myForm1');  
  14.             var formElement2 = document.getElementById('myForm2');  
  15.             alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));  
  16.         </script> 
  17.     </body> 
  18. </html> 
 

 
 

这个情况出现在表单中,如果有一个表单元素name的值为id的时候
 

 
 

在火狐下我们得到的结果是
 

 
 

myForm1 myForm2
 

 
 

但是在IE7下面,却变成了
 

 
 

myForm1 [object]
 

 
 

不知怎么的,ie错误的访问了它内部name位id的input元素而不是表单元素本身的id属性.使用formElement2.id的方法替代getAttribute()我们仍然可以得到相同的效果.(参见我先前遇到的一个IE的BUG)
 

 
 

幸运的是我们仍然可以通过以下的方式得到正确的元素:
 

 
 

formElement2.attributes['id'].value formElement2.getAttributeNode('id').value
 

 
 

既然还有以上的隐性BUG,那我们还要再次修改一下我们覆写的document.getElementById方法
 

 
 

 

  1. if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器
  2. {  
  3.     document.nativeGetElementById = document.getElementById;  
  4.     document.getElementById = function(id)  
  5.     {  
  6.         var elem = document.nativeGetElementById(id);  
  7.         if(elem)  
  8.         {  
  9.             //修改后的确认能得到id属性方法  
  10.             if(elem.attributes['id'].value == id)  
  11.             {  
  12.                 return elem;  
  13.             }  
  14.             else 
  15.             {  
  16.                 //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素  
  17.                 for(var i=1;i<document.all[id].length;i++)  
  18.                 {  
  19.                     if(document.all[id][i].attributes['id'].value == id)  
  20.                     {  
  21.                         return document.all[id][i];  
  22.                     }  
  23.                 }  
  24.             }  
  25.         }  
  26.         return null;  
  27.     };  
  28. }  
 

 
 

OK,这个问题总算解决了,希望我们的微软公司能早日修复这些JavaScript DOM BUG

                

        

        

    




    

      

        

            

              
                
                  dongtianlaile
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
document.getElementsByName和document.getElementById 在IE与FF中不同实现

				
			

			

				

					01-02
				

			

		

		

			
				
^） 但是对于document.getElementsByName 与document.getElementById 这个两个方法，IE中是并没有严格区分 ID 与 Name 的，比如： [removed] function useGetElementsByNameWithId(id) { var eles = d

			
		

	



                

              
                



	

		

			

				
					
js中document.getElementByid、document.all和document.layers区分介绍

				
			

			

				

					01-19
				

			

		

		

			
				
document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的娄组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不分层次，是按照其在...

			
		

	



                


  
              

                


	

		

			

				
					
Document 对象中的方法介绍-getElementById-getElementsByName- getElementsByTagName 方法示例代码

				
			

			

				

					weixin_45185519的博客
				

				

					07-27
					
					3176
					
				

			

		

		

			
				
Document 对象中的方法介绍

document.getElementById(elementId):通过标签的 id 属性查找标签 dom 对象，elementId  是标签的 id 属性值
document.getElementsByName(elementName):通过标签的 name 属性查找标签 dom
对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname):通过标签名查找标签 dom 对象。tagname 是标

			
		

	





	

		

			

				
					
IE中document.getElementById()对name和id的读取

				
			

			

				

					InSearch的专栏
				

				

					02-24
					
					5677
					
				

			

		

		

			
				
/*  IE document.getElementById BUG 演示DEMO      作者:朦朧中的罪惡      博客:http://be-evil.org  */  function changeValue()  {      var username = document.getElementById('username');      username.value = 'Whahaha';  }  name:name2:

			
		

	



		

			
		



	

		

			

				
					
IE中document.getElementById和.getElementsByName特殊表现

				
			

			

				

					前端开发者
				

				

					06-22
					
					576
					
				

			

		

		

			
				
 HTML元素属性Id和name应该是不同的，Id犹如身份证号码，在整个页面中应该是唯一的，而name犹如姓名，在整个页面中可以重复。

 
JS中document.getElementById应该是用于捕捉具有某个id属性的一个元素，document.getElementsByName是用于捕捉具有某个name属性的多个元素。id和name不应当混淆。这一点在firefox中没有问题，而I...

			
		

	





	

		

			

				
					
IE中form混淆id与name的bug

				
			

			

				

					闲谈
				

				

					08-29
					
					160
					
				

			

		

		

			
				
IE的document.getElementById混淆name和id属性的BUG
 



BUG演示

页面演示在这里,代码在下面


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...

			
		

	





	

		

			

				
					
document.getElementById为空或不是对象的解决方法

				
			

			

				

					10-29
				

			

		

		

			
				
document.getElementById为空或不是对象的解决方法，一般情况下注意先内容后js.

			
		

	





	

		

			

				
					
浅谈vue中document.getElementById()拿到的是原值的问题

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
一行代码告别document.getElementById

				
			

			

				

					12-03
				

			

		

		

			
				
当初那种直接访问id的方法，逐渐被document.getElementById所替代。如果这年头还在用id访问元素，要么就是做程序里的内嵌网页，要么就是像铁道部那样的超境界仿古网站：） 当然只要保证你的用户都是用ie访问，这样的...

			
		

	





	

		

			

				
					
document.getElementById()

				
			

			

				

					07-21
				

			

		

		

			
				
document.getElementById()对象和使用方法

			
		

	





	

		

			

				
					
ajax html成功 asp,ajax、Html、asp调用数据库

				
			

			

				

					weixin_36213934的博客
				

				

					06-17
					
					103
					
				

			

		

		

			
				
一.前端页面：testfunction buttonClick() {var name = document.getElementById("name").value;var age = document.getElementById("age").value;var sex = document.getElementById("sex").value;alert("姓名" + name + "年...

			
		

	





	

		

			

				
					
表单上添加按钮

				
			

			

				

					aa1812689的博客
				

				

					03-07
					
					295
					
				

			

		

		

			
				
//百度查询function baiduselect() {    var name = document.getElementById('name').value;//中标单位    if (name != null) {        window.open("http://www.baidu.com/baidu?tn=baidu&word=" + name);    }  ...

			
		

	





	

		

			

				
					
document.getElementById()方法使用

					
热门推荐

				
			

			

				

					酣睡的熊㊣的技术博客
				

				

					02-07
					
					36万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
ie浏览器下get方式获取数据无效问题

				
			

			

				

					weixin_34417814的博客
				

				

					10-31
					
					647
					
				

			

		

		

			
				
在ie浏览器用get方式获取数据时因为发送得到参数地址都是一样的，所以浏览器会优先从缓存获取数据，而不去服务器请求数据，post由于参数不同所以不会影响。
解决方法：
1.Internet选项--浏览历史记录--设置-- Internet 临时文件的选项改为每次访问网页时也可以
2. 在ajax请求的页面后加随机数
　　例：URL=“t=”+Math.random();//或者new ...

			
		

	





	

		

			

				
					
ie.Document.getElementById

					
最新发布

				
			

			

				

					09-14
				

			

		

		

			
				
根据引用和引用的内容，可以看到在判断用户使用的是IE浏览器后，代码会对`document.getElementById`方法进行修改。  在引用中，代码会先判断获取到的元素是否具有与传入的id相同的属性值，如果相同则返回该元素，...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值