JavaScript兼容性汇总

东山风雨起苍黄

​   一般兼容性问都体现到DOM和事件上
​   只聊ie6+版本浏览器，希望小伙伴们别纠结更低版本浏览器哈^_^
DOM

获取元素

• document.getElementsByclassName     不兼容ie6 7 8
  
• 解决方法：
  

function getByClass(oParent,sClass) {
  var aResult=[];

  var aEle=oParent.getElementsByTagName("*");

  var re=new RegExp("\\b"+sClass+"\\b","i");

  for (var i=0;i<aEle.length;i++)
  {
     if(re.test(aEle.className))
     {
       aResult.push(aEle);  
     }   
  }
  return aResult;
}

• document.querySelector      不兼容ie6 7
  

    这个选择器获取方法还是很推荐使用的
    解决方法：可以使用 getElementById

• document.querySelectorAll 不兼容ie6 7
  

    这个选择器获取方法还是很推荐使用的，和上面不同的事，它是获取一组元素
    解决方法：可以使用 getElementsByTagName 或者 上面封装的getByClass
属性

• 自定义属性操作方法
  

getAttribute(name)                不兼容ie6 7

setAttribute(name,value)     不兼容ie6 7

removeAttribute(name)           不兼容ie6 7、
   解决方法：
// 个人建议加加载完html，使用js给标签赋值
obj.index = 1                                                // 设置
console.log(obj.index)        // 获取
obj.index = ''                                        // 清空

• 自定义属性data-*        不兼容ie6 7 8 9 10
  

  console.log(obj.dataset.name)               获取

   obj.dataset.name =  value                     设置      

   解决方法：
function getDataset(ele){
    if(ele.dataset){
        return ele.dataset;
    }else{
        var attrs = ele.attributes,
            dataset = {},
            name,
            matchStr;

        for(var i = 0;i<attrs.length;i++){
            matchStr = attrs.name.match(/^data-(.+)/);
            if(matchStr){
                name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){
                    return letter.toUpperCase();
                });
                dataset[name] = attrs.value;
            }
        }
        return dataset;
    }
}

• 操作class方法
  

   classList.add('name')                   不兼容ie6 7 8 9

   classList.remove('name')              不兼容ie6 7 8 9

   解决方法：
function addClass(obj, class){
  if(!this.contains(class)){
    obj.className +=' ' + class;
  }
}
function removeClass(obj,class){
  if(obj.className.indexOf(class) !== -1){
    var reg= new RegExp(class);   
    obj.className =  obj.className.replace(reg,'');
  }
}节点

• 节点类一起总结: 前面的不兼容ie6
  

// 获取子节点
var children = obj.children || obj.childNodes
// 获取第一个子节点
var first = obj.firstElementChild || obj.firstChild
// 获取最后一个子节点
var last = obj.lastElementChild || obj.lastChild
// 获取上一个兄弟节点
var prev = obj.previousElementSibling || obj.nextElementSibling
// 获取下一个兄弟节点
var next = obj.nextElementSibling || obj.nextElementSibling
滚动距离

// 有文档头
// - docuemnt.documentElement.scrollTop / scrollLeft
// 没有文档头
// - document.body.scrollTop / scrollLeft

// 兼容
var top = docuemnt.documentElement.scrollTop || document.body.scrollTop
var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

• 浏览器可视区大小
  

// 包含工具条与滚动条
// - document.documentElement.clientWidth / clientHeight
// 不包含工具条与滚动条
// - window.innerWidth / innerHeight
// - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度
事件

• 事件对象
  

// 事件对象
// ev 不兼容ie 6 7 8
// window.event 兼容所有浏览器
document.onclick = function (ev) {
    ev = ev || window.event
}

• 获取页面中鼠标位置
  

ev.pageX/ev.pageY  不兼容ie6 7 8
  解决方案：
var x = ev.clientX + document.documentElement.scrollLeft
var y = ev.clientY + document.documentElement.scrollTop

• 获取键盘码
  

ev.keyCode  不兼容火狐
ev.which 不兼容 ie6 7 8
   解决方案：
var code = keyCode || which

• 获取事件源
  

ev.target 不兼容 ie6 7 8

ev.srcElement 兼容所有浏览器

   解决方案：
var src = target || srcElement

• 阻止默认行为
  

ev.preventDefault()       不兼容ie6 7 8
ev.returnValue = false   兼容所有浏览器
解决方案：
function stopDefault(ev) {
    if (ev && ev.preventDefault) {
        ev.preventDefault()
    } else {
        event.returnValue = false
    }
    return false;
}

• 阻止事件冒泡
  

e.stopPropagation()       不兼容ie6 7 8
ev.cancelBubble = true   兼容所有浏览器
解决方案：
function stopPropagat(ev){
    if (ev&& evstopPropagation) {
        evstopPropagation()
    } else {
        event.cancelBubble = true
    }
}

• 事件绑定
  

obj.addEventListener      不兼容9+
obj.attachEvent   兼容ie6 7 8
   解决方案：
function on(obj, type, fn){
    if(obj.addEventListener){   
        obj.addEventListener(type, fn, false)
    }else{
        obj.attachEvent('on'+type, fn)
    }
}

• 事件解除绑定
  

obj.removeEventListener       不兼容9+
obj.detachEvent   兼容ie6 7 8
   解决方案：
function on(obj, type, fn){
    if(obj.removeEventListener){   
        obj.removeEventListener(type, fn, false)
    }else{
        obj.detachEvent('on'+type, fn)
    }
}整理不易，如有遗漏还请多多包涵^_^

扶弟魔赔钱货

大神操作啊 这作者   真细致

时间停不下来

旭哥YYDS~
不错

傅晓俊

还的是我旭哥
[滑稽]

加价加加

感谢支持呐~[红心][红心]一看就是旭哥的小迷弟~~

汉水孤笛

[滑稽][滑稽][滑稽]

小苏打喜欢红

感谢支持呐~[爱]

雅致清风

旭哥YYDS（永远单身）[滑稽]

高级体重规划师嘉欣

旭哥真帅！(5毛1条，括号请删除)

俊兄

咱班啊 ，还得是旭哥啊