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, я вижу "[объект Element] [объект 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

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

Для того, чтобы исправить проблемы в IE для всех Element случаев, вы можете использовать

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