检测数据类型typeof的一个易错点
2018-10-21 本文已影响4人
祝我好运zz
切记 ！！！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"
