相容性

1. 擷取文本

   <div id="father">
        <span id="son">孩子元素</span>
   </div>
   
   1. innerHTML擷取元素内部所有内容，包含子标簽
   
       document.getElementById("father").innerHTML
       結果：<span id="son">孩子元素</span>
   
   2. innerText擷取純文字，不包含标簽(所有浏覽器都支援,火狐低版本不行）
   
       document.getElementById("father").innerText
       結果： 孩子元素
   
   3. textContent擷取純文字，不包含标簽，不會剔除格式資訊和合并連續的空格（IE8及其以下版本不支援)
   
       document.getElementById("father").textContent
       結果： 孩子元素
              

2. 擷取樣式（擷取元素tag的attr屬性值）
   1. getComputedStyle(tag,null)[attr] //IE9以上版本支援

      getComputedStyle(box,null).width
                 

   2. tag.currentStyle[attr] //IE8及其以下版本支援

      box.currentStyle.width
                 

3. 節點的通路

   firstChild          通路第一個子節點（包括換行）
   firstElementChild   通路第一個子元素節點（IE低版本不支援）
   
   lastChild           通路最後一個子節點（包括換行）
   lastElementChild    通路最後一個子元素節點（IE低版本不支援）
   
   childNodes          擷取所有子節點（包括換行）
   children            擷取所有子元素節點（不存在相容問題）
   
   兄弟節點
   
   nextSibling         擷取下一個兄弟節點（包含換行）
   nextElementSibling  擷取下一個兄弟元素節點（IE低版本不支援）
   
   previouseSibling    擷取上一個兄弟節點（包含換行）
   previouseElementSibling  擷取上一個兄弟元素節點（IIE低版本不支援）
   
   父節點（雖無相容性，但也是節點的一個操作）
   parentNode 
   傳回節點的父節點。document.parentNode傳回null，其他的情況下都将傳回一個元素節點，因為隻有元素節點擁有子節點，除了document外任何節點都擁有父節點。parentNode隻讀
              

4. 綁定事件

   addEventListener("click",function(){})  //正常浏覽器（無 “on”）
   attachEvent("onclick",function(){})     //IE浏覽器（有 “on”）
              

5. 解綁事件

   removeEventListener("click",fun)   //正常浏覽器（fun是封裝好的函數）
   detachEvent("onclick",fun)         //IE浏覽器
              

6. 取消預設事件（例子：取消a标簽中的href屬性的跳轉）

   1.return false；（比如： onclick事件中最後加上） 最長用，IE和普通浏覽器都能用
   2.e.preventDefault();    //正常浏覽器
   3.window.event.returnValue = false; //IE浏覽器使用
              

7. 阻止事件傳播

   1.e.stopPropagation();    //正常浏覽器
   2.window.event.cancelBubble = true;   //IE（取消冒泡）
              

8. 經典繼承（Object.create)

   var o1;
   var o2 = {
       name: "jack",
       age: 19
   }
   //o1繼承了o2的屬性和方法，都放在放在o1的原型對象中
   //o2原型中的屬性和方法會放在o1的原型的原型中, 是以o1也都能通路到
   
   備注：Object.create方法在IE8及其以下版本不支援
       實作相容的方法
       if( !Object.create){
       Object.create = function(obj){
               function Fun(){};
               Fun.prototype = obj;
               var o = new Fun();
               return o;
           }
        }
       o1 = Object.create(o2);
       console.log(o1);