直接忽略空白节点的另一个方法 children

之前我分享过一篇关于《自定义insertAfter() 在当前元素节点的后面添加新的内容》的文章中，我提到了在操作时，需要考虑空白节点占据一个子元素位置的说明，我们可以删除或者忽略这个节点，但是会比较麻烦，如果只是想单独获取这个元素的子元素节点数量或者是做一些简单的操作，我们其实可以使用ie的children属性，目前各大浏览器只要不是远古版本，这个属性都是兼容的，写法如下：

html部分：

<div id="box">
   <p>1</P>
   <p>2</P>
   <p>3</P>
   <p>4</P> 
</div>  

Js代码：

window.onload = function() {
    var box = document.getElementById('box');
    alert(box.childNode.length);   // 这里是标准的方法，获取box下所有子元素，一般会返回9
    alert(box.children.length);    // 这里使用ie的属性，返回4
};

这样写非常的方便，但是也有一些局限，如果你是要在最后一个子元素后面进行添加新的元素，像firstChild，lastChild，insertBefore等等，可以通过属性来查询操作的都不能使用了，但是可以通过对应的下标来输出。

比如：

box.children[0].innerHTML;
box.children[0].nodeName;
box.children[0].nodeValue;
box.children[0].nodeType;

方便也有方便的好处，当你删除空白后你不确定是否正确，可以使用if语句加上这个做一个判断，或者你只是想输出对应的内容，children是完全符合你的需求的。