一,相容性
1,冒泡
如何阻止冒泡（存在相容性）
e.stopPropagation(); 谷歌和火狐支援,IE不支援
window.event.cancelBubble=true; IE特有的,谷歌支援,火狐不支援
相容性程式碼(封裝進javascript函式中使用)
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}

2,節點
獲取子節點 ,children與childNodes
返回節點的子節點集合
children： 獲取子元素節點，無相容問題
childNodes：
IE：獲取子元素節點
非IE(chrome，Firefox等):獲取子節點，包括元素節點和文字節點
獲取第一個兒子元素節點,firstChild與firstElementChild
firstChild：
IE6,
 
7,8：獲取第一個子元素節點
非IE6,7,8：獲取第一個子節點，元素節點/文字節點
firstElementChild：
IE6,7,8：不支援
非IE6,7,8： 獲取第一個子元素節點
獲取最後一個子元素節點,lastChild與lastElementChild
lastChild：
IE6,7,8：獲取最後一個子元素節點
非IE6,7,8：獲取最後一個子節點，元素節點/文字節點
lastElementChild：
IE6,7,8：不支援
非IE6,7,8：獲取最後一個元素節點
獲取後一個兄弟元素節點，nextSibling與nextElementChild
nextSibling：
IE6,
 
7,8：獲取後一個兄弟元素節點
非IE6,7,8：獲取後一個兄弟節點，元素節點/文字節點
nextElementChild：
IE6,7,8：不支援
非IE6,7,8：獲取後一個兄弟元素
獲取前一個兄弟元素節點previousSibling與previousElementChild
previousSibling：
IE6,7,8：獲取前一個兄弟元素節點
非IE6,7,8：獲取前一個兄弟節點，元素節點/文字節點
previousElementChild:
IE6,7,8：不支援
非IE6,7,8：獲取前一個元素節點
3,繫結
繫結事件的新方式
addEventListener和attachEvent方法
 
var son = document.querySelector(".son");
son.addEventListener('click', once1);
function once1() {
alert(1)
}
son.addEventListener('click', once2);
function once2() {
alert(2)
} 

物件.addEventListener("事件型別",事件處理函式,false);--谷歌和火狐支援,IE8不支援
 引數1:事件的型別---事件的名字,沒有on
引數2:事件處理函式---函式(命名函式,匿名函式)
引數3:布林型別,目前就寫false（後面會說，現在你不理解）
區別 this不同,addEventListener 中的this是當前繫結事件的物件 
物件.attachEvent("有on的事件型別",事件處理函式)--谷歌不支援,火狐不支援,IE8支援
數1:事件的型別---事件的名字,有on
引數2:事件處理函式---函式(命名函式,匿名函式)
引數3:布林型別,目前就寫false（後面會說，現在你不理解）
attachEvent中的this是window
相容性程式碼
function addEventListener(element,type,fn) {
//判斷瀏覽器是否支援這個方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
 
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});

移除解綁事件
解綁事件
解綁事件
* 物件.addEventListener("沒有on的事件型別",命名函式,false);---繫結事件
* 物件.removeEventListener("沒有on的事件型別",函式名字,false);
* 解綁事件
* 物件.attachEvent("on事件型別",命名函式);---繫結事件
* 物件.detachEvent("on事件型別",函式名字);
解綁相容程式碼
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
function f1() {
console.log("第一個");
}
function f2() {
console.log("第二個");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
}; 

解綁事件的其他方法
// my$("btn2").onclick=function () {
// //1.解綁事件
// my$("btn").onclick=null;
// };
4,inner
InnerText細節技術點
設定標籤中的文字內容,應該使用textContent屬性,谷歌,火狐支援,IE8不支援
設定標籤中的文字內容,應該使用innerText屬性,谷歌,火狐,IE8都支援
瀏覽器相容性寫法
如果這個屬性在瀏覽器中不支援,那麼這個屬性的型別是undefined
判斷這個屬性的型別 是不是undefined,就知道瀏覽器是否支援
核心程式碼 typeof element.textContent =="undefined"
innerText和innerHTML的區別
使用innerText主要是設定文字的,設定標籤內容,是沒有標籤的效果的
innerHTML是可以設定文字內容
innerHTML主要的作用是在標籤中設定新的html標籤內容,是有標籤效果的
想要設定標籤內容,使用innerHTML,想要設定文字內容,innerText或者textContent,或者innerHTML,
推薦用innerHTML
//獲取的時候:
//innerText可以獲取標籤中間的文字內容,但是標籤中如果還有標籤,那麼最裡面的標籤的文字內容也能獲取.獲取不到標籤的,文字可以獲取
5,event
Event事件的相容寫法
獲得event物件相容性寫法 
event || (event = window.event); 
獲得target相容型寫法 
event.target||event.srcElement
function addEventListener(element,type,fn) {
//判斷瀏覽器是否支援這個方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});