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

I believe the correct way to do this is to define your own custom `MyHTMLCollection` constructor and then use it instead of the host constructor `HTMLCollection` (which is not reliable) — Šime Vidas, Oct 13 '11 at 13:02
While I can't answer your specific question about HTMLCollection, it is generally considered bad practice to extend native DOM (hosted) objects. See this article for a detailed explanation why: http://perfectionkills.com/whats-wrong-with-extending-the-dom/ — skyline3000, Oct 13 '11 at 13:07
@skyline3000 I'm perfectly aware of the consequences. We need to do this to generate a DOM-shim. We're not extending the DOM with custom methods (evil) but with methods that should exist as per the DOM4 specification — Raynos, Oct 13 '11 at 13:10

score 16 · Answer 1 · edited Jun 20 '20 at 09:12

16

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 28 '19 at 16:01

Alex Szücs

561
5
12

nice! this is newer and more appropriate answer. – ey dee ey em Dec 13 '19 at 20:43
that is a very practical solution – tipograf ieromonah May 12 '20 at 12:42
1

DocumentFragment must ensure its children detached from previous parent, hence not HTMLCollection counterpart. – Abdillah Feb 21 '23 at 23:42

Šime Vidas · Accepted Answer · 2011-10-13T13:40:24.217

7

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?

edited Oct 13 '11 at 13:40

answered Oct 13 '11 at 13:18

Šime Vidas

182,163
62
281
385

What about `instance[4] = newEl`. `length` would fail. I think you need to calculate length at every get call for it to work. – Raynos Oct 13 '11 at 13:34
@Raynos I just updated my answer. `Object.freeze( this )` inside the constructor, but I'm not sure what the spec says about immutability of HTML collections. I'll check ... – Šime Vidas Oct 13 '11 at 13:36
also `Object.defineProperty` only works on the DOM in IE8 so my dom-shim just broke in IE8. I guess I can make the `length` property a static value in IE8 and just forget about it. – Raynos Oct 13 '11 at 13:37
@ŠimeVidas - [check the spec](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506), collections have a read only length. – RobG Oct 13 '11 at 23:27
@RobG Yes, I defined it as an accessor property with no setter - this makes it read-only. `{ value: arr.length, writable: false }` would be more proper but this works too. – Šime Vidas Oct 13 '11 at 23:42
For the `item` function, it's probably better to do `return this[i] || null;`. That way you aren't accessing the internal array twice. – NathanW May 29 '14 at 03:48
@AlbertoAcuña Which browser? – Šime Vidas Apr 13 '18 at 16:30

score 6 · Answer 3 · answered Oct 13 '11 at 12:53

6

Don't expect host objects to behave like (ECMAScript) native objects, they are completely different things. Some browsers do implement their DOM objects like ECMAScript objects, but it is not required and should not be relied upon. Note that most HTML collections are live, it is very difficult to emulate that in a native object.

answered Oct 13 '11 at 12:53

RobG

142,382
31
172
209

1

They are indeed incredibly difficult to emulate without a Proxy. – Raynos Oct 13 '11 at 13:08

score 2 · Answer 4 · answered Nov 14 '17 at 17:02

I know this is an older question but I came across a similar need to create an empty HTMLCollection and I did it by simply creating an element and then running getElementsByClassName() against it using a class that doesn't exist in the element.

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

This returns an empty HTMLCollection object.

create a HTMLCollection

4 Answers4

Linked

Related