JS中兼容代码总结---更新中

 

1.设置标签中的文本内容，可以使用textContent属性和innerText属性。

textContent属性：谷歌、火狐支持，IE8不支持；

innerText属性：谷歌、火狐、IE8都支持；

兼容代码

/**
 * 设置元素的文本内容
 * @param element 任意元素
 * @param text 任意文本内容
 */
function setInnerText(element, text) {
  if (typeof element.textContent == "undefined") {
    element.innerText = text;
  } else {
    element.textContent = text;
  }
}

/**
 * 获取元素的文本内容
 * @param element 任意元素
 * @returns {*} 任意元素中的文本内容
 */
function getInnerText(element) {
  if (typeof element.textContent == "undefined") {
    return element.innerText;
  } else {
    return element.textContent;
  }
}

 

2.元素的获取某些方法在IE8中不支持

element.firstChild ---> 谷歌和火狐获取的是第一个子节点

element.firstChild ---> IE8获取的是第一个子元素

element.firstElementChild ---> 谷歌和火狐是第一个子元素，IE8不支持

兼容代码

/**
 * 获取父级元素中的第一个子元素
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getFirstElementChild(element) {
  if (element.firstElementChild) { //true--->支持
    return element.firstElementChild;
  } else {
    var node = element.firstChild; //第一个节点
    while (node && node.nodeType != 1) {
      node = node.nextSibling;
    }
    return node;
  }
}

/**
 * 获取父级元素中的最后一个子元素
 * @param element 父级元素
 * @returns {*} 父级元素中的子级元素
 */
function getLastElementChild(element) {
  if (element.lastElementChild) { //true--->支持
    return element.lastElementChild;
  } else {
    var node = element.lastChild; //第一个节点
    while (node && node.nodeType != 1) {
      node = node.previousSibling;
    }
    return node;
  }
}

 

element.previousSibling---> 谷歌和火狐获取的是前一个兄弟节点，IE8获取的是前一个兄弟元素

element.nextSibling---> 谷歌和火狐获取的是后一个兄弟节点，IE8获取的是前一个兄弟元素

element.previousElementSibling---> 谷歌和火狐获取的是前一个兄弟元素，IE8不支持

element.nextElementSibling---> 谷歌和火狐获取的是后一个兄弟元素，IE8不支持

兼容代码

/**
 * 获取某个元素的前一个兄弟元素
 * @param element 某个元素
 * @returns {*} 前一个兄弟元素
 */
function getPreviousElementSibling(element) {
  if (element.previousElementSibling) {
    return element.previousElementSibling
  } else {
    var node = element.previousSibling; // 上一个兄弟节点
    while (node && node.nodeType != 1) {
      node = node.previousSibling;
    }
    return node;
  }
}

/**
 * 获取某个元素的后一个兄弟元素
 * @param element 某个元素
 * @returns {*} 后一个兄弟元素
 */
function getNextElementSibling(element) {
  if (element.nextElementSibling) {
    return element.nextElementSibling
  } else {
    var node = element.nextSibling; // 下一个兄弟节点
    while (node && node.nodeType != 1) {
      node = node.nextSibling;
    }
    return node;
  }
}

 

 3.为元素绑定事件

对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持

对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

兼容代码

//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
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;
  }
}

 4.为元素解绑事件

兼容代码

//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
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;
  }
}