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

ParentNode.children兼容性说明

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

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

【实现浏览器兼容版的ParentNode.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来筛选符合要求的节点的，后来发现注释节点筛选失败，所以换了一种方式。