zoukankan      html  css  js  c++  java
  • 解决document.getElementById("")在IE7中误读成name的bug

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
              <script>
                  myReady(function(){
                    //var div=document.getElementById('container');//获取div对象
                    //console.log(div.tagName);
                    //console.log(div.getElementById("ul1"));//getElementById("")只能使用document进行调用,其他的不行。
                    
                    //var btn=document.getElementById("button");//获取按钮对象
                    //btn.onclick=function(){
                    //    var target=document.getElementById("target");//获取id="target"对象。
                    //    console.log(target.innerHTML);
                    //    //输出:这是正确元素。 如果存在多个id="target",那么只读取第一个id="target"的元素,默认id只能唯一。
                    //    //在IE7中读取的是name="target",输出的是:这是错误元素。这是浏览器的一个bug。
                    //}
                    
                    
                    //解决document.getElementById("")在IE7中误读成name的bug。name和id值相等,且name的标签在前面,IE7会把getElementById("")取成name所在的标签。这是一个BUG。
                    //下面可以作为自己的框架进行使用
                    var getElementById=function(id){
                        var el=document.getElementById(id);
                        //使用转义字符做文章 。  在IE浏览器中 v 并没有进行转义,"v"="v",这里的"v1"="v1"。IE浏览器解析为字符串。前面的+号就是为了把这个字符串转化为数字,把+"v1"=parseNumber("v1") 返回值:isNaN,!isNaN 就是 !false,返回:true。
                        //而在其他浏览器中,对"v"会解释为一个垂直的制表符,一定程度上相当于空格。即:+"v1"="1",+1表示把1转化为数字,parseNumber(1)=1=true,!true就是false。
                        if (!+"v1") {//所以如果是IE浏览器就会返回true,否则返回false。
                            if (el && el.id===id) {
                                return el;
                            }else{
                                var els=document.all[id],
                                    len=els.length;
                                    for (var i = 0; i < len; i++) {
                                        if (els[i].id===id) {
                                            return els[i];
                                        }
                                    }
                            }
                        }
                        return el;
                    };
                    console.log(getElementById("target").tagName);
                  })
              </script>
          <body>
              <div id="container">
                  <a href="#" name="target">这是错误元素</a>
                  <p id="target">这是正确元素</p>
                  <p id="target">这是正确元素</p>
                  <button type="button" id="button">测试</button>
                  <ul id="ul1">
                      <li  id="li1"><a href="">3333</a><a href="" id="onea">111</a><span>222222</span></li>
                      <li><a href="">111</a></li>
                      <li><a href="">111</a></li>
                  </ul>
                  <ul id="ul2">
                      <li></li>
                      <li></li>
                      <li></li>
                  </ul>
              </div>
          </body>



  • 相关阅读:
    Redis的分布式锁
    Redis的雪崩、击穿、穿透
    psr规范
    Mysql的联(复)合索引
    nginx的location配置(二)
    nginx的location规则(一)
    easyswoole中队列的使用
    第三章 文件I/O
    移动语义及拷贝优化
    PHP对接tdzntech.com云平台电子免费券程序
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10828483.html
Copyright © 2011-2022 走看看