全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

JavaScript兼容性汇总

发布时间:2022-06-01 15:28:00
发布人:wjy

 一般兼容性问题都体现到DOM和事件上

 只聊ie6+版本浏览器,希望小伙伴们别纠结更低版本浏览器哈。

JavaScript兼容性汇总

## DOM

### 获取元素

- `document.getElementsByclassName` 不兼容ie6 7 8
- 解决方法:

```js
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[i].className))
     {
       aResult.push(aEle[i]); 
     }  
  }
  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、

解决方法:

```text
// 个人建议加加载完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 设置

解决方法:

```text
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[i].name.match(/^data-(.+)/);
            if(matchStr){
                name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){
                    return letter.toUpperCase();
                });
                dataset[name] = attrs[i].value;
            }
        }
        return dataset;
    }
}
```

- 操作class方法

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

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

解决方法:

```text
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

```js
// 获取子节点
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
```

### 滚动距离

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

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

- 浏览器可视区大小

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

## 事件

- 事件对象

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

- 获取页面中鼠标位置

`ev.pageX/ev.pageY` 不兼容ie6 7 8

解决方案:

```text
var x = ev.clientX + document.documentElement.scrollLeft
var y = ev.clientY + document.documentElement.scrollTop
```

- 获取键盘码

`ev.keyCode` 不兼容火狐

`ev.which` 不兼容 ie6 7 8

解决方案:

```text
 var code = keyCode || which
```

- 获取事件源

`ev.target` 不兼容 ie6 7 8

`ev.srcElement` 兼容所有浏览器

解决方案:

```text
 var src = target || srcElement
```

- 阻止默认行为

`ev.preventDefault()` 不兼容ie6 7 8

`ev.returnValue = false` 兼容所有浏览器

解决方案:

```text
function stopDefault(ev) {
    if (ev && ev.preventDefault) {
        ev.preventDefault()
    } else {
        event.returnValue = false
    }
    return false;
}
```

- 阻止事件冒泡

`e.stopPropagation()` 不兼容ie6 7 8

`ev.cancelBubble = true` 兼容所有浏览器

解决方案:

```text
function stopPropagat(ev){
    if (ev&& evstopPropagation) {
        evstopPropagation()
    } else {
        event.cancelBubble = true
    }
}
```

- 事件绑定

`obj.addEventListener` 不兼容9+

`obj.attachEvent` 兼容ie6 7 8

解决方案:

```text
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

解决方案:

```text
function on(obj, type, fn){
    if(obj.removeEventListener){  
        obj.removeEventListener(type, fn, false)
    }else{
        obj.detachEvent('on'+type, fn)
    }
}
```

整理不易,如有遗漏还请多多包涵。更多关于“html5培训”的问题,欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验,课程大纲更科学更专业,有针对零基础的就业班,有针对想提升技术的提升班,高品质课程助理你实现梦想。

相关文章

今日头条视频怎么赚钱?头条号赚钱方法汇总

2023-09-19

今日头条展现量是什么?今日头条展现量规则分析

2023-09-19

今日头条怎么发布文章有收益?今日头条收益规则

2023-09-19

自媒体怎么入门挣钱?自媒体赚钱入门教程分享

2023-09-19

自媒体写文章怎么赚钱?自媒体写文章教程

2023-09-19

怎么上传短视频赚钱?短视频赚钱方法

2023-09-19
在线咨询 免费试学 教程领取