create a HTMLCollection

Question

I'm trying to shim Element.prototype.children which should return a HTMLCollection

There is a window.HTMLCollection

However

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

and

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

Test Firefox 7 and Chrome

Apart from shimming HTMLCollection is there any way to interact with it?

Also provide feedback on this github issue if you can suggest a solution

Answer 1

I think this is the proper way of creating HTMLCollection, which is handled by the browser.

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

Refs.:

https://stackoverflow.com/a/35969890/10018427

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 2

Here's how I would do it:

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;
    }
};

where arr is a regular array that contains all the DOM elements which should be inside the HTMLCollection.

To do list:

• the argument arr should be checked beforehand: Is it an array? Are all elements of that array DOM elements?