我前一篇文章提到了，今天使用印象筆記和馬克飛象來做筆記阵漏，并提到了Markdown編輯器峭弟，這篇childNodes和children的區(qū)別筆記朗伶，就是我把簡(jiǎn)書的寫文章編輯模式由“富文本模式”換成了“Markdown”模式而寫的好渠，對(duì)于我們這些新手來說昨稼，記筆記，特別是有代碼塊的地方拳锚，使用Markdown編輯假栓，一目了然。當(dāng)然了霍掺，對(duì)于大神匾荆，已經(jīng)深知Markdown的當(dāng)我什么沒說，略過就好杆烁。廢話不多說牙丽，下面進(jìn)入正題：
我們都知道，當(dāng)我們想要知道一個(gè)標(biāo)簽里面有多少子節(jié)點(diǎn)的時(shí)候兔魂，都是使用childNodes來查看剩岳。如下面代碼（查看ul的子節(jié)點(diǎn)）：
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
alert(oUl.childNodes.length);
//上面彈出語(yǔ)句的結(jié)果為：在IE 6-8 瀏覽器中是2，但在ie9以上或者其他瀏覽器入热，如谷歌拍棕，火狐等結(jié)果都是5，因?yàn)檫@些瀏覽器都把ul到li之間的空白節(jié)點(diǎn)也算上了勺良，所以結(jié)果為5绰播。
}
</script>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
這就是使用childNodes帶來的問題，當(dāng)然了尚困，我們可以借助nodeType來解決這個(gè)問題蠢箩。通過判斷節(jié)點(diǎn)的nodeType來得到我們想要的結(jié)果，(因?yàn)槲谋竟?jié)點(diǎn)的nodeType值等于3事甜，而元素節(jié)點(diǎn)的nodeType值等于1)谬泌，代碼如下：
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.backgroundColor = 'red';
}
}
}
</script>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
上面，我們了解到了childNodes因?yàn)闉g覽器版本的不同逻谦，給我們帶來的麻煩掌实。雖然借助nodeType可以解決我們的麻煩。但是邦马，有更方便的方法嗎贱鼻？答案是：當(dāng)然有。它就是children滋将。children和childNodes最大的區(qū)別是邻悬，無論什么瀏覽器使用，都不會(huì)把空白節(jié)點(diǎn)算進(jìn)去随闽，也不需要nodeType來幫助判斷父丰，直接使用。當(dāng)我們要實(shí)現(xiàn)上面的效果時(shí)掘宪，使用children蛾扇，不需要借助nodeType來做判斷，代碼如下：
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
for(var i=0;i<oUl.children.length;i++){
//alert(oUl.children.length) 結(jié)果為2添诉；
oUl.children[i].style.backgroundColor = 'yellow';
}
}
</script>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
好吧屁桑，看完他們的區(qū)別后，我們來做個(gè)總結(jié)栏赴，經(jīng)過上面的比較蘑斧，相信大家也大概能猜到了childNodes和children的區(qū)別了，他們的區(qū)別就是childNodes包括元素節(jié)點(diǎn)和文本節(jié)點(diǎn)须眷，而children只包括元素節(jié)點(diǎn)竖瘾。所以，當(dāng)我們使用時(shí)花颗，需要使用哪個(gè)捕传，不用多說，大家也能知道了扩劝。
