实现浏览器兼容版的ParentNode.children

ParentNode.children兼容性说明

1. element.children属性桌面端和手机端所有浏览器都是支持的

注意：IE6、7、8上面element.children的结果集中还会包括注释标签

2.document.children属性桌面端和手机端针对IE和Safari都不支持，其他一些浏览器低版本也不支持

关于更多兼容性的问题可以点击这里进行查看

ParentNode.children兼容版实现函数

/**
 * [兼容低版本IE的element.children]
 * @param  {[type]} element [父元素]
 * @return {[type]}         [孩子节点集合]
 */
function getElementChildren(element) {
    if (!element.children) { //判断是否有children属性
        var childNodesList = element.childNodes; //获取元素下面所有的孩子节点
        var len = childNodesList.length;
        var childrenList = [];
        for (var i = 0; i < len; i++) {
            if (childNodesList[i].nodeType === Node.ELEMENT_NODE) {
                //如果是标签那么加入孩子节点数组
                childrenList.push(childNodesList[i]);
            }
        }
        return childrenList;
    } else {
        return element.children;
    }
}

函数返回值问题

从上面的实现代码可以看出：在支持element.children的浏览器中返回的值element.children是HTMLCollection类型，但是在不支持element.children的浏览器中，返回的是一个数组对象。对于js中是否需要统一函数的返回值类型我还不是很清楚，所以暂时没有处理，如果清楚的朋友可以给我留言说明。

节点类型判断

1.Node.nodeType知识

| 常数 | 值 | 说明 |
| ------- |:----------:| :--------|
| Node.ELEMENT_NODE | 1 | 元素节点，如:

、 。|
| Node.TEXT_NODE | 3 | 文本 |
| Node.COMMENT_NODE | 8 | 注释节点 |
| Node.DOCUMENT_NODE | 8 | document节点 |

说明：上面列出了部分js中nodeType的常量，更多信息请点击这里查看

使用childNodesList[i].nodeType === Node.ELEMENT_NODE来进行节点类型的判断，在不支持element.children的浏览器中筛选符合要求的孩子节点。

2.最开始我是使用childNodesList[i].tagName来筛选符合要求的节点的，后来发现注释节点筛选失败，所以换了一种方式。