实现浏览器兼容版的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.childrenHTMLCollection类型,但是在不支持element.children的浏览器中,返回的是一个数组对象。对于js中是否需要统一函数的返回值类型我还不是很清楚,所以暂时没有处理,如果清楚的朋友可以给我留言说明。

节点类型判断

1.Node.nodeType知识

| 常数 | 值 | 说明 |
| ------- |:----------:| :--------|
| Node.ELEMENT_NODE | 1 | 元素节点,如:<div>、<span> 。|
| 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来筛选符合要求的节点的,后来发现注释节点筛选失败,所以换了一种方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 427评论 0 0
  • 什么是DOM??? DOM(Document Object Model 文档对象模型)是针对HTML和XML文档的...
    荧惑3_3阅读 1,412评论 0 1
  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    前端进阶之旅阅读 3,962评论 7 34
  • “满生,辛苦你了,又麻烦你跑一趟了。”老人佝偻着身子看着男人,发皱的脸庞,满是岁月的留痕。 “陈婆,你腿脚不方便,...
    菌菇sama阅读 758评论 2 5
  • 人都是从陌生到熟悉,从初见時的惊艳到相濡以沫最后有可能是分道扬镳也有可能相守到老。當然,我想表达得这段关系的并不是...
    阳光de味道阅读 663评论 3 1