我们知道jquery中可以对各个浏览器进行了兼容，在写jquery代码的时候，不用考虑兼容性。下面模拟一个兼容性处理的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="content">aaa</div> <span class="i">bbb</span> <div id="head"> <span class="i"></span> </div> </body> <script> var support={ getElementsByClassName:false }; if (typeof document.getElementsByClassName === 'function') { //测试方法的执行结果是否跟我们预想的结果一样 //1、手动创建一个div元素 ，span元素，并span元素成为div的子元素 //2、给span标签添加一个class=i var div = document.createElement("div"); var span = document.createElement("span"); span.className = "i"; div.appendChild(span); //3、查找div下面的class=1的第一个元素是不是就是我们的span元素 if (typeof div.getElementsByClassName === 'function') { var spans = div.getElementsByClassName('i'); if (spans && spans.length === 1 && spans[0] === span) { support.getElementsByClassName=true; } } } function getTags(tagName) { return document.getElementsByTagName(tagName); } function getId(idName) { return document.getElementById(idName); } function getClasses(className) { if(support.getElementsByClassName){ //兼容 return document.getElementsByClassName(className); }else{ //不兼容 var result=[]; //兼容性处理代码： //1、首先获取页面中所有的元素 var allTags=document.getElementsByTagName('*'); //2、循环遍历每一个元素，判断这个元素是不是具有指定的className for (var i = 0; i < allTags.length; i++) { var dom=allTags[i]; //.......2.1、先获取元素的className（获取class属性） var cName=dom.className; //.......2.2、将cName添加前后空格，再将className添加前后空格 var index=(' '+cName+' ').indexOf(' '+className+' '); //.......2.3、如果index的值不是-1，那么就为了该dom元素是符合条件的 if(index!=-1){ result.push(dom); } } //3、返回结果数组result return result; } } //增加 一个干扰，看能否检测出来 document.getElementsByClassName = function () { }; var result = getClasses('content'); console.log(result); </script> </html>
