HTMLDocument和XMLDocument 的children

时间 2019-11-11

标签 htmldocument xmldocument children 繁體版

原文原文链接

在全部主流浏览器中，document是一个HTMLDocument类型的对象。javascript

document.children 或者 DOM元素的children都是能够访问的，它返回是该节点下的全部Element节点。它们一样还有一个childNodes属性，它返回全部节点，区别就是它包含全部文字节点，注释节点等等，它通常比 children返回的元素多。html

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]java

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

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

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

W3C并无定义XMLDocument接口。缘由是document接口原本就是为xml定义的。而HTML只是xml的一种实现。浏览器

如今来看，就IE浏览器解析的XMLDocument有问题！为了保证代码用children属性，给这两个原型增长children，我是这样解决的：app

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]);

完美解决！this