Создать HTMLCollection

Question

Я пытаюсь шим Element.prototype.children который должен вернуть HTMLCollection

E сть window.HTMLCollection

тем не мение

var h = new HTMLCollection();
//TypeErrror: HTMLCollection is not a constructor

а также

var h = Object.create(HTMLCollection.prototype);
h[0] = div;
h.item(0); 
// Could not convert JavaScript argument

Тест Firefox 7 и Chrome

Помимо шимминга HTMLCollection есть ли способ взаимодействовать с ним?

Также предоставьте отзыв об этой проблеме GitHub, если вы можете предложить решение

Answer 1

Вот как бы я это сделал:

function MyHTMLCollection( arr ) {
    for ( var i = 0; i < arr.length; i += 1 ) {
        this[i] = arr[i];
    }

    // length is readonly
    Object.defineProperty( this, 'length', {
        get: function () {
            return arr.length;
        }
    });

    // a HTMLCollection is immutable
    Object.freeze( this );
}

MyHTMLCollection.prototype = {
    item: function ( i ) {
        return this[i] != null ? this[i] : null;
    },
    namedItem: function ( name ) {
        for ( var i = 0; i < this.length; i += 1 ) {
            if ( this[i].id === name || this[i].name === name ) {
                return this[i];
            }
        }
        return null;
    }
};

где arr это обычный массив, который содержит все элементы DOM, которые должны быть внутри HTMLCollection.

Список дел:

• Аргумент arr следует проверить заранее: это массив? Все ли элементы этого массива являются DOM-элементами?

Answer 2

Я думаю, что это правильный способ создания HTMLCollection, который обрабатывается браузером.

var docFragment = document.createDocumentFragment();
docFragment.appendChild(node1);
docFragment.appendChild(node2);
var myHTMLCollection = docFragment.children;

Ссылки:

/questions/29353116/kak-sozdat-obekt-nodelist-iz-dvuh-ili-bolee-domnodes/29353130#29353130

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

https://www.w3schools.com/js/js_htmldom_nodelist.asp

Answer 3

Не ожидайте, что хост-объекты будут вести себя как (ECMAScript) нативные объекты, это совершенно разные вещи. Некоторые браузеры реализуют свои объекты DOM, такие как объекты ECMAScript, но это не обязательно и на них нельзя полагаться. Обратите внимание, что большинство HTML-коллекций являются живыми, очень трудно эмулировать это в нативном объекте.

Answer 4

Я знаю, что это старый вопрос, но я столкнулся с аналогичной необходимостью создать пустую коллекцию HTMLCollection, и я сделал это, просто создав элемент, а затем запустив для него getElementsByClassName(), используя класс, который не существует в элементе.

document.createElement("div").getElementsByClassName('noClassHere');

Это возвращает пустой объект HTMLCollection.