首页 > 技术文章 > javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法

layaling 2018-03-26 16:48 原文

<a name="target" href="#">链接</a>
<p id="target">文字说明</p>

一、 以上代码中都可以通过document.getElementById("target")获取a标签和p标签,这就是getElementById()的bug所在;

 1 <script>
 2         var getElementById=function(id){
 3                 var el=document.getElementById(id);
 4                 if(!+"\v1"){                                  //判断浏览器 if(!+"\v1"){} IE浏览器中对\v1转换成v1 其他浏览器转换成1,!表示取反,IE浏览器中对!v1理解为true
 5                      if(el&&el.id==id){
 6                              return el;
 7                        }else{
 8                             var els=document.all[id],
 9                                  n=els.length;
10                             for(var i=0;i<n;i++){
11                                 if(els[i].id==id){
12                                      return els[i];
13                                  }
14                             }
15                        }
16                 } 
17                return el; 
18         };
19 </script>        

二、getElementsByClassName的兼容性写法

 1 var getElementsByClassName = function(opts) {
 2     var searchClass = opts.searchClass;
 3     var node = opts.node || document;
 4     var tag = opts.tag || '*';
 5     var result = [];
 6 
 7     if (document.getElementsByClassName) {
 8         var nodes = node.getElementsByClassName(searchClass);
 9         if (tag !== "*") {
10             for (var i = 0; node = nodes[i++];) {
11                 if (node.tagName === tag.toUpperCase()) {
12                     result.push(node);
13                 }
14             }
15         } else {
16             result = nodes;
17         }
18         return result;
19     } else {
20         var els = node.getElementsByTagName(tag);
21         var elsLen = els.length;
22         var i, j;
23         var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
24         for (i = 0, j = 0; i < elsLen; i++) {
25             if (pattern.test(els[i].className)) {
26                 result[j] = els[i];
27                 j++;
28             }
29         }
30         return result;
31     }
32 }

 

推荐阅读