子节点(node):包括子级里边所有的标签、空格、文本等。
子元素:当前子级里的所有的标签元素。
通过DOM获取第一个子节点的方法:getFirstChild;------->谷歌火狐支持,正常使用,但是IE8获取的是第一个子元素
通过DOM获取第一个子元素的方法:getFirstElementChild -------->谷歌火狐支持,正常使用但是IE8是undefined
所以我们就可以通过这个不一样来做为问题的切口。
这里通过一个例子来展示一下解决这个兼容问题的兼容代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的兼容代码</title>
</head>
<body>
<!--在console控制台里边打印出第一个子元素的内容-->
<ul id="uu">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
</ul>
<script>
//因为元素获取的代码在不同浏览器里边不兼容所以需要写兼容代码
//第一个子元素的获取代码:对象.firstElementChild --->谷歌火狐支持,IE8undefined
//第一个子节点获取的代码:对象.firstChild -----> 谷歌火狐支持,IE8获取的是第一个子元素
//用函数封装:
//获取父级元素的第一个子元素:
function getFirstElementChild (element) {
if(typeof element.firstElementChild !="undefined"){
//说明浏览器识别 不是IE8,直接返回
return element.firstElementChild;
}else{
//说明不可以识别,但是为了可以防止是谷歌或者是火狐等浏览器将其识别为子节点
var node = element.firstElementChild;
//因为node可能会是在谷歌或者火狐浏览器里边捕获到的子节点
while(node && node.nodeType != 1){
//如果node为空,就会进入循环,并且不是标签类型
//为了排除其他非元素节点的干扰
node = node.nextSibling;
//当前元素被下一个元素覆盖
}
//如果可以跳出循环,就说明找到了第一个子元素,直接返回
return node;
}
}
console.log(getFirstElementChild(document.getElementById("uu")).innerText);
</script>
</body>
</html>
结果:
每一步在代码里边都注释的很清楚。个人觉得,兼容代码一般是前端工程师的一大头疼难题,目前我只接触了一点点,但是解决方法却只有一种思想,就是使用判断的方法来写兼容代码。emmmm....不知道在以后的积累中还能不能积累到更高明的方法来解决。