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]); 完美解决！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/06/06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
