javascript - documentElement 没有子元素

Question

var element = new DOMParser().parseFromString('<foo><bar></bar></foo>', 'application/xml').documentElement;
var children = element.children;
document.write('' + element);
document.write('' + children);

在 Chrome 和 Firefox 中，我看到“[object Element][object HTMLCollection]”。

但在 IE 9-11 中，我看到“[object Element]未定义”。

为什么documentElement没有子元素？

在 IE 9+(以及 Chrome 和 FF)中获取元素的所有子元素的最佳方法是什么？

Answer 1

我推荐的最直接的方法是在元素的子节点上使用Array.prototype.filter():

function getChildElements(element) {
     return Array.prototype.slice.call(element.childNodes)
     .filter(function (e) { return e.nodeType === 1; });
}

var childElements = getChildElements(element);