浅析JavaScript中浏览器的兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。

1、innerText 和 innerContent
1）innerText 和 innerContent 的作用相同
2）innerText IE8之前的浏览器支持
3）innerContent 老版本的Firefox支持
4）新版本的浏览器两种方式都支持

1 // 老版本浏览器兼容 innerText 和 innerContent2 if (element.textContent) {3    return element.textContent ;4  } else {5    return element.innerText;6  }

2、获取兄弟节点/元素的兼容性问题
 1）兄弟节点，所有浏览器都支持
        ①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点
        ②previousSibling  上一个兄弟节点，可能是非元素节点；会获取到文本节点
 2）兄弟元素，IE8以前不支持

        ①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白 
        ②nextElementSibling  获取下一个紧邻的兄弟元素，会忽略空白

//兼容浏览器// 获取下一个紧邻的兄弟元素function getNextElement(element) {  // 能力检测 if(element.nextElementSibling) {   return element.nextElementSibling;  } else {     var node = element.nextSibling;     while(node && node.nodeType !== 1) {         node = node.nextibling;     }     return node;  } }

/*** 返回上一个元素* @param element* @returns {*}*/function getPreviousElement(element) {  if(element.previousElementSibling) {    return element.previousElementSibling;  }else {    var el = element.previousSibling;    while(el && el.nodeType !== 1) {      el = el.previousSibling;      }    return el;  }}

/*** 返回第一个元素firstElementChild的浏览器兼容* @param parent* @returns {*}*/function getFirstElement(parent) {  if(parent.firstElementChild) {    return parent.firstElementChild;  }else {    var el = parent.firstChild;    while(el && el.nodeType !== 1) {      el = el.nextSibling;      }    return el;  }}

/*** 返回最后一个元素* @param parent* @returns {*}*/function getLastElement(parent) {  if(parent.lastElementChild) {    return parent.lastElementChild;  }else {    var el = parent.lastChild;    while(el && el.nodeType !== 1) {      el = el.previousSibling;      }    return el;  }}

/***获取当前元素的所有兄弟元素* @param element* @returns {Array}*/function sibling(element) {  if(!element) return ;    var elements = [ ];  var el = element.previousSibling;  while(el) {    if(el.nodeType === 1) {      elements.push(el);    }    el = el.previousSibling;  }   el = element.previousSibling;   while(el ) {    if(el.nodeType === 1) {      elements.push(el);    }    el = el.nextSibling;  }    return elements;}