切记 !!!typeof返回的值是一个字符串!!!
出错的代码:
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
//IE8获取节点的代码变成了获取元素,获取元素的返回undefined 所以要有兼容代码
//以获取第一和最后一个子元素为例
//获取任意父元素的第一个子元素
function getFirstElementChildByParent(element) {
if (typeof element.firstElementChild != undefined) {
//切记typeof返回的是字符串,所以我之前undefined没加引号,一直有问题,因为"undefined"!=undefined肯定是正确的
return element.firstElementChild;
} else {
// return element.firstChild;
//本来针对ie8这样就够了,但为了更严谨,比如有浏览器不识别firstElementChild,识别firstChild,但返回的又确实是第一个子节点
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
console.log(getFirstElementChildByParent(my$("uu")));
</script>
此段代码为获取子元素的兼容代码,本来判断一个属性是否在浏览器中支持,是看它的类型是否是undefined,所以我写了
typeof element.firstElementChild != undefined,但发现不支持的ie8也返回了true,难道undefined !=undefined不是false吗??然后去找了半天,也没解决,结果最后才发现typeof返回的数据类型的值是一个字符串啊!!此时"undefined"!=undefined肯定一直是true,这才恍然大悟。
所以正确的代码应为:typeof element.firstElementChild != "undefined"