兼容性

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);