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] undefined”。

为什么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);

Answer 2

{p> children在ParentNode界面中定义，由Element实现。

但是，似乎在IE上，ParentNode由HTMLElement而不是Element实现。

有趣的是，这种脏方法适用于IE上的单个实例：

element.__proto__ = HTMLElement.prototype;
var children = element.children;          // Now this works
element.__proto__ = Element.prototype;    // Restore [[Prototype]]

为了解决所有Element个实例的IE问题，您可以使用

var obj = Element.prototype,
    prop = 'children',
    desc = Object.getOwnPropertyDescriptor(HTMLElement.prototype, prop);
if(!obj.hasOwnProperty(prop) && desc)
    Object.defineProperty(obj, prop, desc);

documentElement没有子节点

2 个答案: