HTMLDocument和XMLDocument 的children

最新推荐文章于 2022-07-11 12:21:42 发布

weixin_34029680

最新推荐文章于 2022-07-11 12:21:42 发布

阅读量370

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1540190/blog/915288

版权

2019独角兽企业重金招聘Python工程师标准>>>

在所有主流浏览器中，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]);

完美解决！

转载于:https://my.oschina.net/u/1540190/blog/915288