使用 querySelectorAll 后无法将元素推送到数组答案

【问题标题】：Cannot push element to array after using querySelectorAll使用 querySelectorAll 后无法将元素推送到数组
【发布时间】：2016-08-28 20:40:21
【问题描述】：

所以我有一个简单的类，它的属性很少。使用原型设计我添加了一些方法。这些方法返回this，所以我可以将它们链接在一起。

Get 方法找到所有元素并放入allCurrentElements，这是一个数组（或者至少我认为是这样）。当我使用CreateElement 方法时，它只是创建元素并尝试将其推送到现有数组allCurrentElements。

要使用它，只需写var a = _h.Get('p').CreateElement('div')。这是我收到错误Uncaught TypeError: this.allCurrentElements.push is not a function(…)的地方。

如果我尝试使用索引分配新创建的元素，它不会抛出错误，但是该元素不会出现在数组中。

var _h = (function(){
    var Helper = function(){
        this.allCurrentElements = [];
    }

    Helper.prototype.Get = function(query){
        this.allCurrentElements = document.querySelectorAll(query);
        return this;
    }

    Helper.prototype.CreateElement = function(el, attr) {
        var elem = document.createElement(el);
        for (var a in attr) {
            elem[a] = attr[a];
        }

        //this.allCurrentElements[this.allCurrentElements.length] = elem;
        this.allCurrentElements.push(elem);
        return this;
    }

    return new Helper();
})();

https://jsfiddle.net/Ldp58onu/

【问题讨论】：

标签： javascript arrays oop prototype

【解决方案1】：

document.querySelectorAll() 返回NodeList，这是一个类似数组的对象。

问题在于 NodeList 是只读的。您需要将其转换为数组。 Array.prototype.slice.call(document.querySelectorAll(query));

之后你就可以随心所欲了。

【讨论】：

非常感谢，不幸的是我只能接受一个答案:(
如果你不喜欢输入太多，或者只是 [].slice.call() :)

【解决方案2】：

你必须检查Document.querySelectorAll()文档https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

返回所有匹配元素节点的非活动 NodeList。

NodeList 的使用与数组非常相似，很容易在它们上调用 Array.prototype 方法，但是 NodeList 对象没有任何熟悉的 Array 方法。

所以你必须遍历 NodeList 之类的东西：

Array.prototype.forEach.call(document.querySelectorAll(query), function(element){ 

        allCurrentElements.push(element);

});

【讨论】：