兼容性

  1. 获取文本

    孩子元素
    1. innerHTML获取元素内部所有内容,包含子标签 document.getElementById("father").innerHTML 结果:孩子元素 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);
    

你可能感兴趣的:(javascript)