原生JS-浏览器兼容性问题总结

1、获取元素：

通用

document.getElementById('id名');document.getElementsByTagName('标签名');

IE9+ 支持

document.getElementsByClassName('class名');document.querySelector('#id/.className/tag');document.querySelectorAll('#id/.className/tag');

解决方案

​ 先通过通用获取元素的方法如下，获取目标元素的父级或自己或兄弟元素，再通过通用的节点获取方法获取目标元素。（获取节点方法见2）

2、获取节点

通用

parentNode得到的是上级第一个父级 html 的父级打印documentoffsetParent得到第一个有定位的父级，从里到外查找childNodes得到的是所有孩子，是个集合（回车会造成文本节点）children仅返回所有子元素节点firstChild获取第一个子节点lastChild获取最后一个子节点nextSibling获取下一个兄弟节点（包含元素、文本节点）previousSibling获取上一个兄弟节点（包含元素、文本节点）

IE9+ 支持

firstElementChild获取第一个子元素节点lastElementChild获取最后一个子元素节点nextElementSibling 获取下一个兄弟元素节点previousElementSibling 获取上一个兄弟元素

Firefox 9 新引入:目前主流浏览器支持

parentElement 得到的是上级第一个父级元素html的父级打印null

3、获取元素样式

标准浏览器

window.getComputedStyle(元素).属性名

IE8及以下

元素.currentStyle.属性名

解决方案

原理：浏览器能力的判断

​ 在IE9及以上，返回一个函数，在IE8及以下，返回 undefined

函数封装

function getStyle(ele, attr) {if (window.getComputedStyle) {// 标准浏览器return window.getComputedStyle(ele)[attr];} else {// IE8及以下return ele.currentStyle[attr];}}

4、时间戳

通用

时间对象.getTime()

IE8及以下不支持

Date.now()

5、去除字符串左右空格

IE8及以下不支持

字符串.trim()

解决方案

封装方法

function trim(str) {var re = /^\s+|\s+$/g;return str.replace(re, '');}

6、数组方法

IE8及以下不支持

数组.indexOf(要查找的项, 查找的起始位置);

数组.lastIndexOf(要查找的项, 查找的起始位置);

Array.isArray(参数) 作用：判断参数是否是一个数组，如果是，返回true，否则返回false

forEach没有返回返回值

map、filter返回数组

every、some返回布尔值

7、input事件（内容只要发生变化时触发的事件）

IE8及以下不支持

input.oninput = function () {console.log(this.value);}

IE8及以下支持

input.onpropertychange = function () {console.log(this.value);}

8、事件对象

谷歌和IE的事件对象是：全局的event对象

标准浏览器支持：事件函数的第一个参数 通常记作ev

解决方案

var ev = ev || event; // 原理：浏览器能力的判断

9、事件源

IE支持：ev.srcElement

标准浏览器支持：ev.srcElement

解决方案

var target = ev.target || ev.srcElement; // 事件源兼容

10、鼠标相对于文档的位置

ev.pageX, ev.pageY 鼠标相对于文档的位置（IE8及以下不支持）

11、添加事件

IE8及以下不支持

元素.addEventListener(不要on的事件, 函数, 是否捕获); // 添加

元素.removeEventListener(不要on的事件, 函数, 是否捕获); // 解除

IE8及以下支持

元素.attachEvent(带on的事件, 函数); // 添加

元素.detachEvent(带on的事件, 函数); // 解除

解决方案

​原理兼容原理：浏览器能力判断（在标准浏览器下返回函数，在IE8及以下返回undefined）

封装函数

添加绑定

// 添加绑定，参数：元素 事件 函数function bind(ele, attr, callback) {if (ele.addEventListener) {ele.addEventListener(attr, callback, false);} else {ele.attachEvent('on' + attr, callback);}}

解除绑定

// 解除绑定，参数：元素 事件 函数function unbind(ele, attr, callback) {if (ele.removeEventListener) {ele.removeEventListener(attr, callback, false);} else {ele.detachEvent('on' + attr, callback);}}

12、阻止冒泡

标准浏览器：ev.stopPropagation();

IE 浏览器：ev.cancelBubble = true;

解决方案

封装函数

原理兼容原理：浏览器能力判断

function stopPropagation(ev) {if (ev.stopPropagation) {// 标准浏览器ev.stopPropagation();} else {// IE8及以下ev.cancelBubble = true;}}

13、阻止事件的默认行为

标准浏览器：ev.preventDefault();

IE8及以下 ：ev.returnValue = false;

解决方案

return false;存在缺陷：return后的语句不再解析执行

封装函数

function preventDefault(ev) {if (ev.preventDefault) {ev.preventDefault();} else {ev.returnValue = false;}}

14、按键事件对象属性

IE8 及以下不支持

ev.key 具体的按键

解决方案：获取按键的ASCII编码：ev.keyCode

15、滚轮事件

事件

IE和标准浏览器：onmousewheel

火狐：DOMMouseScroll，必须用addEventListener绑定

滚轮方向

IE和标准浏览器：ev.wheelDelta

火狐：ev.detail

解决方案

封装函数

// 滚轮方向兼容 向上：120 向下：-120function wheelDelta(ev) {if (ev.wheelDelta) {// IE和标准浏览器return ev.wheelDelta; // 向上：120 向下：-120} else {// 火狐return -40 * ev.detail; // 上：120下：-120}}

用（11、添加事件）中封装的方法统一

bind(div[i], 'mousewheel', fn); // IE和标准浏览器bind(div[i], 'DOMMouseScroll', fn); // 火狐

16、数组 IndexOf() 方法

arr.IndexOf() IE9及以上支持

解决方案：重写数组原型上的方法

原理：浏览器能力的判断Array.prototype.indexOfIE8 及以下打印undefined

if (!Array.prototype.indexOf) {Array.prototype.indexOf = function(val, index) {index = typeof index === 'undefined' ? 0 : index;for (var i = index; i < this.length; i++) {if (this[i] === val) {return i;}}return -1;}}