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.firstChildconsole.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.lastChildconsole.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); //==> undefinedconsole.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); //==> undefinedconsole.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.currentStyleconsole.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// 获取targetlet 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;
