<html>
<head>
<script>
window.onload=function(){
var oUl = document.getElementById("ul1");
var i=0;
for(i=0;i<oUl.childNodes.length;i++){
oUl.childNodes[i].style.height=30+'px';
}
}
</script>
<style type='text/css'>
</style>
</head>
<body>
<ul id='ul1'>
<li>jason</li>
<li>rekken</li>
<li>guo</li>
</ul>
</body>
</html>
運(yùn)行之后報(bào)Cannot set property 'height' of undefined錯(cuò)誤
在IE下childNodes取得的節(jié)點(diǎn)不包括文本節(jié)點(diǎn)，而在Chrome或Firefox下得到的節(jié)點(diǎn)包括文本節(jié)點(diǎn)，具體看下面代碼的執(zhí)行結(jié)果：
var oUl = document.getElementById("ul1");
console.log(oUl.childNodes); // [text, li, text, li, text, li, text]
在代碼中，當(dāng)循環(huán)childNodes的時(shí)候，第一個(gè)節(jié)點(diǎn)是textNode，不具備style屬性，所以會(huì)報(bào)'undefined';
常見(jiàn)的解決方法有兩種：
// 方法一
var oUl = document.getElementById("ul1");
var i=0;
var children = oUl.childNodes;
for(i = 0; i < children.length; i++){
if (children[i].nodeType === 1) {
children[i].style.background = 'red';
}
}
// 方法二
var oUl = document.getElementById("ul1");
var i=0;
var children = oUl.children;
for(i = 0; i < children.length; i++){
children[i].style.background = 'red';
}
兩種方法都能達(dá)到想要的效果，且解決了報(bào)錯(cuò)的問(wèn)題
