在所有主流浏览器中,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]);
完美解决!