zoukankan      html  css  js  c++  java
  • 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元素。由于我基本不用它,修正方法就交由那些对它感兴趣的人吧。

  • 相关阅读:
    js 文件的操作
    js重点基础知识 以及小案例_最简单的轮播图 简单的动态表格( encodeURIComponent()编码比 encodeURI()编码)
    2阶——数据库连接池 c3p0 , druid, dbcp (其实所有的连接池都实现了dataSource接口,就可以调用getconnection方法)
    2阶——JDBC,JDBCTemplate(操作数据库)
    vue + django 批量删除
    简单的模糊搜索 Vue + django
    vue 父子组件传参简单的分页
    vue 多对多反序列化上传图片
    模型里的 抽象类 表继承
    django 多对多反序列添加
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1610044.html
Copyright © 2011-2022 走看看