IE6的getElementById bug

最新推荐文章于 2021-08-05 12:10:16 发布

原创最新推荐文章于 2021-08-05 12:10:16 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ie #button #function #object #attributes #浏览器

本文探讨了IE6中getElementById方法存在的问题及其解决方案。通过调整获取元素的方式，确保跨浏览器兼容性。

作为DOM最核心的选择器竟然在IE6中有bug，这是何等令人汗颜的事。此bug会在返回第一个id或name等于我们传入id的元素。

因此，我们取得元素后判定一下它是用name取得的还是用id取得。方法很简单，看看此元素是否显示为id赋值，并且此id值是否等于我们传入的id。如果没有我们就用document.all["XXX"]返回页面上所有id或name等于XXX的元素，逐个比较它的id是否等于我们的传入id。


      var getElementById = function(id){
        var el = document.getElementById(id);
        if(!+"/v1"){
          if(el && el.id === id){
            return el
          }else{
            var els = document.all[id],n = els.length;
            for(var i=0;i<n;i++){
              if(els[i].id === id){
                return els[i]
              }
            }
          }
        }
        return el;
      }

方法很完美是不是，但此判定方法在IE6，IE7中我们遭遇另一个bug的狙击。IE的bug总是官官相卫。表单元素的id值不能为"id"。另，如果是直接用.id的方式来取值，无论是在IE还是标准浏览器，都无法取得正确值，而是返回元素本身的toString()。

在标准浏览器中，它会弹出：myForm1,myForm2,myForm1,[object HTMLInputElement]。

在IE8的IE7兼容模式中，它会弹出：myForm1,[object HTMLInputElement],myForm1,[object HTMLInputElement]。

在IE6中，它则弹出myForm1,object,myForm2,object。

看来.id与getAttribute("id")都不保险，我们还可以用attributes["id"]与getAttributeNode("id")，它们都返回一个节点，我们再调用它的value就可以正确取得id值了。


      var getElementById = function(id){
        var el = document.getElementById(id);
        if(!+"/v1"){
          if(el && el.attributes['id'].value === id){
            return el
          }else{
            var els = document.all[id],n = els.length;
            for(var i=0;i<n;i++){
              if(els[i].attributes['id'].value === id){
                return els[i]
              }
            }
          }
        }
        return el;
      }

好了，我们测试一下这个修改版getElementById的效果吧。

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>修改版getElementById  By 司徒正美</title>
    <script type="text/javascript">
      var getElementById = function(id){
        var el = document.getElementById(id);
        if(!+"/v1"){
          if(el && el.attributes['id'].value === id){
            return el
          }else{
            var els = document.all[id],n = els.length;
            for(var i=0;i<n;i++){
              if(els[i].attributes['id'].value === id){
                return els[i]
              }
            }
          }
        }
        return el;
      }
    
      window.onload = function(){
        var bn = getElementById("button");
        bn.onclick = function(){
          var target = getElementById("target");
          alert(target.innerHTML);
        }
      }
    </script>
  </head>
  <body>
    <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a>
    <p id="target">这是正确的元素</p>
    <button id="button" type="button">开始测试</button>
  </body>
</html>