childNodes和children的区别

我前一篇文章提到了，今天使用印象笔记和马克飞象来做笔记，并提到了Markdown编辑器，这篇childNodes和children的区别笔记，就是我把简书的写文章编辑模式由“富文本模式”换成了“Markdown”模式而写的，对于我们这些新手来说，记笔记，特别是有代码块的地方，使用Markdown编辑，一目了然。当然了，对于大神，已经深知Markdown的当我什么没说，略过就好。废话不多说，下面进入正题：

我们都知道，当我们想要知道一个标签里面有多少子节点的时候，都是使用childNodes来查看。如下面代码（查看ul的子节点）：

<script>
window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
        alert(oUl.childNodes.length);
    //上面弹出语句的结果为：在IE 6-8 浏览器中是2，但在ie9以上或者其他浏览器，如谷歌，火狐等结果都是5，因为这些浏览器都把ul到li之间的空白节点也算上了，所以结果为5。
}
</script>
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
</body>

这就是使用childNodes带来的问题，当然了，我们可以借助nodeType来解决这个问题。通过判断节点的nodeType来得到我们想要的结果，(因为文本节点的nodeType值等于3，而元素节点的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因为浏览器版本的不同，给我们带来的麻烦。虽然借助nodeType可以解决我们的麻烦。但是，有更方便的方法吗？答案是：当然有。它就是children。children和childNodes最大的区别是，无论什么浏览器使用，都不会把空白节点算进去，也不需要nodeType来帮助判断，直接使用。当我们要实现上面的效果时，使用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) 结果为2；
        oUl.children[i].style.backgroundColor = 'yellow';
    }
}
</script>
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
</body>

好吧，看完他们的区别后，我们来做个总结，经过上面的比较，相信大家也大概能猜到了childNodes和children的区别了，他们的区别就是childNodes包括元素节点和文本节点，而children只包括元素节点。所以，当我们使用时，需要使用哪个，不用多说，大家也能知道了。

childNodes和children的区别

推荐阅读更多精彩内容