Ruby's Louvre

每天学习一点点算法

导航

IE6的getElementById bug

作为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的效果吧。

PS:最后提一提另一个重要的原生查找API,getElementsByName,IE6与Opera7.5在这个方法上存在更多的Bug,首先它们会返回id等于给定值的元素,其次它们仅仅返回input元素与img元素。由于我基本不用它,修正方法就交由那些对它感兴趣的人吧。

posted on 2009-11-25 10:12  司徒正美  阅读(3742)  评论(14编辑  收藏  举报