创建一个 HTMLCollection

Question

我正在尝试填充 Element.prototype.children 其中应该返回一个 HTMLCollection

有一个 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 之外 code> 有什么办法可以与之交互吗？

如果您可以提出解决方案，还可以提供有关此 github 问题的反馈

Answer 1

我认为这是创建 HTMLCollection 的正确方法，由浏览器处理。

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

参考文献：

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

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

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

https://www.w3schools.com/js/js_htmldom_nodelist.asp< /p>

Answer 2

我的做法如下：

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 是一个常规数组，其中包含应位于 HTMLCollection 内的所有 DOM 元素。

待办事项列表：

• 应事先检查参数 arr：它是数组吗？该数组的所有元素都是 DOM 元素吗？

Answer 3

不要期望宿主对象的行为类似于（ECMAScript）本机对象，它们是完全不同的东西。有些浏览器确实像 ECMAScript 对象一样实现了 DOM 对象，但这不是必需的，也不应该依赖。请注意，大多数 HTML 集合都是实时的，很难在本机对象中模拟它。

Answer 4

我知道这是一个较旧的问题，但我遇到了类似的创建空 HTMLCollection 的需求，我通过简单地创建一个元素，然后使用元素中不存在的类对其运行 getElementsByClassName() 来做到这一点。

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

这将返回一个空的 HTMLCollection 对象。