1、IE 与常规浏览器兼容总结

1.1、变量声明

1.1.1、let

let声明关键字在IE 11及以下无法使用，使用时会报错 SCRIPT11011: 缺少 ';'，在IE12 可以正确获取值，建议在IE11时使用关键字var

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        let box = document.getElementById('box');  // ==> IE11 以下报错： SCRIPT11011: 缺少 ';'，IE 12 以上正确获取
    </script>
</body>
复制代码

1.1.2、const

const声明关键字在IE 11及以下无法使用，使用时会报错 SCRIPT11011: 缺少 ';'，在IE12 可以正确获取值，建议在IE11时使用关键字var

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        let box = document.getElementById('box');  // ==> IE11 以下报错： SCRIPT1109: 语法错误，IE 12 以上正确获取
    </script>
</body>
复制代码

1.2、元素获取

1.2.1、document.querySelector

IE 8 以下不支持，IE 9 以上支持

   //==> IE8
   <div class="box"></div>
    <script>
        // IE 8 以下不支持  报错==>对象不支持“querySelector”属性或方法
       var box = document.querySelector('.box');
       console.log(box);
    </script>

	//==> IE9 [object Object] 返回查找元素对象信息
复制代码

1.2.2、document.querySelectorAll

IE 8 以下不支持，IE 9 以上支持

<body> 
    <div class="box"></div>
    <script>
        // IE 8 以下不支持  报错==>SCRIPT11109: 对象不支持“querySelectorAll”属性或方法
        // IE 9 [object Object]
       var box = document.querySelectorAll('.box');
       console.log(box);
    </script>
</body>
复制代码

1.2.3、document.getElementsByClassName

IE 9 以下不支持，IE 10 以上支持

<body>
    <div class="box"></div>
    <script>
        // IE 9 以下不支持  报错==>SCRIPT11109: 对象不支持“getElementsByClassName”属性或方法
        // IE 10 HtmlCollection
       var box = document.getElementsByClassName('box');
       console.log(box);
    </script>
</body>
复制代码

1.3、节点获取

1.3.1、element.firstElementChild

element.firstElementChild在IE 9 以下会返回 undefined，IE 10 以上可以正确获取，常规浏览器支持。

IE 9 以下替换方案：element.firstChild

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
       var box = document.getElementById('box');
       console.log(box.firstChild); // IE 9 以下不支持  输出==> undefined
       console.log(box.firstElementChild);// IE 10 HtmlCollection
    </script>
</body>
复制代码

兼容写法：

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        var box = document.getElementById('box');
        var res = box.firstElementChild ? box.firstElementChild : box.firstChild
        console.log(res); //==> [object Object] 元素对象
    </script>
</body>
复制代码

1.3.2、element.lastElementChild

element.lastElementChild在IE 9 以下会返回 undefined，IE 10 以上可以正确获取，常规浏览器支持。

IE 9 以下替换方案：element.lastChild

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
       var box = document.getElementById 
       console.log(box.lastElementChild);// IE 9 以下不支持  输出==> undefinedd('box');
       console.log(box.lastChild);// IE 10 HtmlCollection
    </script>
</body>
复制代码

兼容写法：

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color">#ccc</div>
    </div>
    <script>
        var box = document.getElementById('box');
        var res = box.lastElementChild ? box.lastElementChild : box.lastChild
        console.log(res); //==> [object Object] 元素对象
    </script>
</body>
复制代码

1.3.3、element.priviousElementSibling

element.priviousElementSibling在IE 9 以下会返回 undefined，IE 10 以上可以正确获取，常规浏览器支持。

IE 9 以下替换方案：element.priviousElement

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        var box = document.getElementById('color'); 
        console.log(box.previousElementSibling); //==> undefined
        console.log(box.previousSibling); //==> [object Object]
    </script>
</body>
复制代码

兼容写法：

	var element = box.previousElementSibling || box.previousSibling
复制代码

1.3.4、element.nextElementSibling

element.nextElementSibling在IE 9 以下会返回 undefined，IE 10 以上可以正确获取，常规浏览器支持。

IE 9 以下替换方案：element.nextSibling

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        var box = document.getElementById('color'); 
        console.log(box.nextElementSibling); //==> undefined
        console.log(box.nextSibling); //==> [object Object]
    </script>
</body>
复制代码

兼容写法：

	var element = box.nextElementSibling || box.nextSibling
复制代码

1.3.5、return的方式返回

function nextElementSibling(element){
   return element.nextElementSibling ||element.nextSibling
}
复制代码

1.4、样式获取

1.4.1、window.getComputedStyle

常规浏览器： window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类) ，一般我们不用伪类,时写null

注意： window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类) 会返回一个 CSSStyleDeclaration 集合（伪数组），可以用对象的形式 style.width获取，也可以通过下标值进行获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        let style = window.getComputedStyle(box,null)
        console.log(style);  //==> CSSStyleDeclaration
    </script>
</body>
</html>
复制代码

IE 浏览器: element.currentStyle

element.currentStyle 会返回一个对象，只能通过element.currentStyle.width的方式或者遍历对象获取属性信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-9">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box')
        let style = box.currentStyle
        console.log(style); //==> [object MSCurrentStyleCSSPropertiesPrototype]
    </script>
</body>
</html>
复制代码

兼容写法：

/**
 * 
 * @param {*} element 获取类样式的元素
 * @param {String} attr 获取的类样式[可传可不传，不传则返回当前元素所有的类样式]
 */
function getStyle(element, attr) {
    if (attr) {
        return window.getComputedStyle ? window.getComputedStyle(element)[attr] : element.currentStyle[attr]
    }else {
        return window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle
    }
}
复制代码

1.5、事件

1.5.1、二级事件绑定和解绑

1.5.1.1、事件绑定

在常用浏览器中，可以使用addEventListener，但是在IE 9 以下不支持，需要使用attachEvent进行二级事件绑定。

兼容写法为：

/**
 * 
 * @param {*} element 需要绑定事件的元素
 * @param {*} type 事件类型
 * @param {*} callbak 绑定的回调函数
 */
function getAddEventListener(element, type, callbak) {
    return element.getAddEventListener ? element.getAddEventListener(type,callbak):element.attachEvent('on'+type,callbak)
}
复制代码

1.5.1.2、事件解绑

常用浏览器可以使用removeEventListener解绑事件，但是在IE9以下需要使用detachEvent进行事件解绑，callbackname为绑定的事件名

兼容写法：

/**
 * 
 * @param {*} element 需要进行事件解绑的元素
 * @param {*} callbakname 进行解绑的事件名
 */
function getRemoveEventListener(element, callbakname) {
    return element.removeEventListener ? element.removeEventListener(callbakname):element.detachEvent(callbakname)
}
复制代码

1.5.2、事件对象 e

在常用浏览器中，事件对象e为事件处理函数中可以使用形参e来获取（默认在事件处理函数第一位形参），在IE中为 window.event

兼容写法：

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        document.querySelector('button').addEventListener('click',function(e){
            let event = e || window.event  //==> 可以使用此种方式获取事件对象
        })
    </script>
</body>
复制代码

1.5.3、target

在事件对象中，获取target方式为：target => e.target || e.srcElement

<body>
    <div class="box" id="box" name="121">
        <span>第一个子元素</span>
        <div class="color" id="color">#ccc</div>
        <button>确定</button>
    </div>
    <script>
        document.querySelector('button').addEventListener('click',function(e){
            let event = e || window.event
            // 获取target
            let target = e.target || e.srcElement
        })
    </script>
</body>
复制代码

1.5.4、冒泡

由于事件会冒泡，根据不同的需求需要阻止事件冒泡。常规浏览器：事件对象e中，有一个阻止事件冒泡的方法 e.stopProprogation() ，方法中不需要传参。在IE 9以下：需要使用事件对象中的属性，e.cancelBubble = true

兼容写法：

document.querySelector('button').addEventListener('click',function(e){
  	e.stopProprogation ? e.stopProprogation() : e.cancleBubble = true         
})
复制代码

1.5.5、键盘事件中的keyCode

1.5.5.1 keyDown

获取键盘事件keyDown中的点击按键信息，在常规浏览器和IE浏览器具有差异常规浏览器：e.which IE浏览器：e.keyCode

document.addEventListener('keydown',function(e){
  	let event = e || window.event
    //==> 获取键盘按下的信息
    let key = event.which || event.keyCode
})
复制代码

1.5.6、鼠标事件中的button与buttons

在鼠标事件对象e中，常规浏览器和IE 9 在button上有不同，但是可以兼容，所以不必要写兼容常规浏览器中：e.button IE浏览器中：e.buttons

1.5.7、阻止标签自带的默认事件

阻止标签自带的默认事件，例如 a标签的跳转事件，form的提交等在常规浏览器中： e.preventDefault() 在IE中使用： e.returnValue = false;

01-20210116、浏览器的兼容解决方案

01-20210116、浏览器的兼容解决方案

1、IE 与常规浏览器兼容总结

1.1、变量声明

1.1.1、let

1.1.2、const

1.2、元素获取

1.2.1、document.querySelector

1.2.2、document.querySelectorAll

1.2.3、document.getElementsByClassName

1.3、节点获取

1.3.1、element.firstElementChild

1.3.2、element.lastElementChild

1.3.3、element.priviousElementSibling

1.3.4、element.nextElementSibling

1.3.5、return的方式返回

1.4、样式获取

1.4.1、window.getComputedStyle

1.5、事件

1.5.1、二级事件绑定和解绑

1.5.1.1、事件绑定

1.5.1.2、事件解绑

1.5.2、事件对象 e

1.5.3、target

1.5.4、冒泡

1.5.5、键盘事件中的keyCode

1.5.5.1 keyDown

1.5.6、鼠标事件中的button与buttons

1.5.7、阻止标签自带的默认事件