HTMLDocument和XMLDocument 的children

在所有主流浏览器中,document是一个HTMLDocument类型的对象。

document.children  或者 DOM元素的children都是可以访问的,它返回是该节点下的所有Element节点。 它们同样还有一个childNodes属性,它返回所有节点,区别就是它包含所有文字节点,注释节点等等,它一般比 children返回的元素多。

console.dir(document.__proto__) HTMLDocument console.dir(document.body.__proto__) HTMLBodyElement document.children [html] document.childNodes (2) [<!DOCTYPE html>, html] document.body.children (2) [div#main, div.timeTravel] document.body.childNodes (4) [text, div#main, text, div.timeTravel]

IE11下,解析一个XML文件后,得到的对象是XMLDocument,它竟然没有children属性。而chrome,firefox都是有children属性的。

var parser = new DOMParser();
var root = parser.parseFromString(this.xbrl, "application/xml");   //root 是XMLDocument对象

去MDN上查询一下XMLDocument的API,竟然说

W3C并没有定义XMLDocument接口。原因是document接口本来就是为xml定义的。而HTML只是xml的一种实现。

现在来看,就IE浏览器解析的XMLDocument有问题!为了保证代码用children属性,给这两个原型增加children,我是这样解决的:

var parser = new DOMParser();
var root = parser.parseFromString(this.xbrl, "application/xml");
    //IE11中,root是XMLDocument对象,没有  children属性
if (!root.children) {
    Object.defineProperty(XMLDocument.prototype, "children", {
        get: function () {
            var nodes=Array.prototype.slice.call( this.childNodes) as Node[];
            return nodes.filter((n)=>n.nodeType==1);
        }
    });
    Object.defineProperty(Element.prototype, "children", {
        get: function () {
            var nodes=Array.prototype.slice.call( this.childNodes) as Node[];
            return nodes.filter((n)=>n.nodeType==1);
        }
    });
}
//此处即可用children来获取子节点了,
this.xbrlHtml = this.renderElement(root.children[0]);    

完美解决!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

17个案例带你3分钟搞定Linux正则表达式

正则表达式是一种字符模式,用于在查找过程中匹配制定的字符。 元字符通常在Linux中分为两类: Shell元字符,由Linux Shell进行解析; 正则表达式...

3444
来自专栏用户2442861的专栏

JAVA反射机制作用是什么

Java的反射机制是Java特性之一,反射机制是构建框架技术的基础所在。灵活掌握Java反射机制,对大家以后学习框架技术有很大的帮助。

6672
来自专栏小二的折腾日记

day5(面向对象2)

##Runtime对象 该类并没有提供构造函数。说明不可以new 对象,那么会直接想到该类中的方法都是静态的,发现该类中海油非静态方法。 说明该类肯定会提供了方...

452
来自专栏GreenLeaves

C# this关键字(给底层类库扩展成员方法)

本文参考自唔愛吃蘋果的C#原始类型扩展方法—this参数修饰符,并在其基础上做了一些细节上的解释 1、this作为参数关键字的作用 使用this关键字,可以向t...

2107
来自专栏python成长之路

自定义异常并抛出,捕获

1355
来自专栏Python小屋

Python中的队列结构及其用法

Python标准库queue提供了LILO队列类Queue、LIFO队列类LifoQueue、优先级队列类PriorityQueue,标准库collection...

3595
来自专栏Janti

干货——详解Java中的关键字

在平时编码中,我们可能只注意了这些static,final,volatile等关键字的使用,忽略了他们的细节,更深层次的意义。

1073
来自专栏Crossin的编程教室

【Python 第66课】列表综合

大家假期过得可好?今天来讲讲 Python 里一个我非常喜欢的特性--列表综合(List Comprehension)。所谓列表综合,就是通过一个已有的列表生成...

3488
来自专栏C/C++基础

抛出和接收异常的顺序

异常(exception)是C++语言引入的错误处理机制。它 采用了统一的方式对程序的运行时错误进行处理,具有标准化、安全和高效的特点。C++为了实现异常处理,...

973
来自专栏C语言及其他语言

[蓝桥杯]字符逆序

题目描述 将一个字符串str的内容颠倒过来,并输出。str的长度不超过100个字符。 输入 输入包括一行。 第一行输入的字符串。 输出 输出转换好的逆序字符串。...

3495

扫码关注云+社区