如何解决不同浏览器之间的兼容性问题
一、在解决浏览器兼容性的问题上面，首先，可以通过获取浏览器的版本来判断这个浏览器是不是支持这个属性，但是这种办法非常的麻烦。
具体做法是：我要在一系列的信息中找到这个浏览器版本里面的具体是什么样的，然后用正则表达式去匹配，然后确定这个浏览器里面具体用的什么东西。这就是整个的内容，所以，相当的麻烦。
当然，获取浏览器版本的代码很简单，就一句话，一行代码，但是仅仅是为了判断这个浏览器是不是支持这个属性 ，是不是放在这里好像有点儿大材小用了。因此，就直接判断这个浏览器里面是不是支持这个属性就可以了。
为了解决这个不兼容的问题，我们可以编辑以下代码来解决上述问题：
//任意元素都可以设置成文本内容----------因此把“任意”元素当成对象（element）传递到函数中
//element---->任意元素
//text--->任意文本内容
function setInnerText(element,text) {
if(typeof (element.textContent)=='undefined'){//是IE8浏览器
element.innerText=text;
}else{
//浏览器支持textContent这个属性
element.textContent=text;
}
}
//获取任意元素中的文本内容
function getInnerText(element) {
if(typeof (element.textContent)=="undefined"){
//如果浏览器不支持textContext这个属性则返回innerText的值
return element.innerText;
}else{
//如果浏览器支持textContext属性,则直接返回该属性的值
return element.textContent;
}
}
代码如下：
二、上述代码就可以解决innnerText和textContent在各个浏览器之间不兼容的问题（上述代码目前只在谷歌，火狐，IE8版本上面测试，以后还会在其他的浏览器的不同版本上面测试，测试结果还会不断的更新，尽请期待）。
上面介绍的内容只阐述部分属性在各个浏览器上面的差异，当然，还有其他的兼容问题存在，他们分别是：
（1）获取某个元素中的第一个子元素
（2）获取某个元素中的最后一个子元素
（3）获取某个元素的前一个兄弟元素
（4）获取某个元素的后一个兄弟元素
下面，我分别给出了相应的兼容性问题解决办法代码：
1 //获取某个元素中的第一个子元素
2 function getFirstElement(element) {
3 if(element.firstElementChild){
4 //如果浏览器支持这个属性就直接返回第一个子元素
5 return element.firstElementChild;
6 }else{
7 //如果浏览器不支持这个firstElementChild属性,先获取传入进来的父级元素中的第一个子节点
8 var node=element.firstChild;//先获取这个节点
9 while (node&&node.nodeType!=1){//判断节点存在并且不是标签
10 node=node.nextSibling;//继续找当前节点的下一个节点
11 }
12 return node;
13 }
14 }
20 //下面这连个属性在各个不同的浏览器中显示的方式有所不同
21 //my$("uu").firstChild
22 //my$("uu").firstElementChild
23
24 //获取某个元素中的最后一个子元素
25 function getLastElement(element) {
26 if(element.lastElementChild){
27 return element.lastElementChild;
28 }else{
29 //获取当前元素的最后一个子节点
30 var node=element.lastChild;
31 while (node&&node.nodeType!=1){
32 node=node.previousSibling;
33 }
34 return node;
35 }
36 }
44
45 //获取某个元素的前一个兄弟元素
46 function getPreviousElement(element) {
47 if(element.previousElementSibling){
48 return element.previousElementSibling
49 }else{
50 var node=element.previousSibling;
51 while (node&&node.nodeType!=1){
52 node=node.previousSibling;
53 }
54 return node;
55 }
56 }
57
58
59
60 //获取某个元素的后一个兄弟元素
61 function getNextElement(element) {
62 if(element.nextElementSibling){
63 return element.nextElementSibling
64 }else{
65 var node=element.nextSibling;
66 while (node&&node.nodeType!=1){
67 node=node.nextSibling;
68 }
69 return node;
70 }
71 }
三、代码截图如下：
