DOM操作兼容代码

如果浏览器不兼容这个属性或者方法会报 类型undefined 因此根据undefined写兼容代码

得到文本内容 设置文本内容

• innerText兼容谷歌火狐 ie11
• textContent 兼容ie8

<p id="p1">兼容性</p>
</body>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    function getInnerText(ele) {
        if (typeof ele.textContent == "undefined") {
            return ele.innerText;
        } else {
            return ele.textContent;
        }
    }

    function setInnerText(ele, tex) {
        if (typeof ele.textContent == "undefined") {
            ele.innerText = tex;
        } else {
            ele.textContent = tex;
        }
    }
    setInnerText(my$("p1"), "分色费");
    console.log(getInnerText(my$("p1")));

• 在获取第一个子节点/元素、最后一个子节点/元素、前一个兄弟节点/元素、后一个兄弟节点/元素里面获取元素部分在ie8中不兼容 获取节点在ie8中获取的是元素 比如获取第一个子节点的ele.firstElementChild在ie8中获取的是第一个子元素
• nodeType是节点类型 1--标签 2--属性 3---文本

  /得到父元素的第一个子元素 兼容
  function getfristChild(ele){
  //undefined不兼容是false 兼容就是ture
  if(ele.firstElementChild){
  return ele.firstElementChild;
  }else{
  var node = ele.firstChild;
  //node是判断node是否有意义 存在 因为空格是没有意义的
  //当nodeType等于1的时候 就说明找到了第一个标签
  while(node&&node.nodeType!=1){
  //当node没有意义并且不是标签的时候查找他的下一个兄弟
  node = node.nextSibling;
  }
  return node;
  }
  }
  

• 绑定和解绑元素兼容问题
• addEventListener支持火狐 谷歌 ie11
• attachEvent支持ie8

<input value="绑定兼容代码" id="btn" type="button">
<input value="解绑兼容代码" id="btn2" type="button">
<script>
function my$(id){
return document.getElementById(id);
}
//添加绑定的兼容代码
function addEventListener(ele,type,fnName){
if(ele.addEventListener){
ele.addEventListener(type,fnName,false);
}else if(ele.attachEvent){
ele.attachEvent(type,fnName);
}else{
ele["on"+type]=fnName;
}
}
//解绑的兼容代码
function removeEventListener(ele,type,fnName){
if(ele.removeEventListener){
ele.removeEventListener(type,fnName,false);
}else if(ele.detachEvent){
ele.detachEvent(type,fnName);
}else{
ele["on"+type]=null;
}
}

function fnName(){
console.log("添加绑定事件");
}
addEventListener(my$("btn"),"click",fnName);
my$("btn2").onclick=function(){
removeEventListener(my$("btn"),"click",fnName);