Javascript拼接DOM元素数组

var myArray = [];
myArray = document.querySelectorAll('.selected');

And when I called myArray.splice - it was undefined. How can I avoid this? I need remove some of DOM elements from that array.

当我打电话给myArray.splice时 - 它是未定义的。我怎么能避免这个?我需要从该数组中删除一些DOM元素。

3 个解决方案

#1

The problem is that querySelectorAll(..) returns a list of nodes (NodeList) -- not a standard JS array.

问题是querySelectorAll(..)返回一个节点列表(NodeList) - 而不是标准的JS数组。

May be you'd want something like below:

可能是你想要的东西如下:

Array.prototype.slice.call(document.querySelectorAll('.selected'),  <begin>, <end>);

UPDATE

I missed the portion where you are trying to delete, thanks @torazaburo. Fortunately, you can directly apply filter on the NodeList instead of going via an array conversion. Something like below:

我错过了你要删除的部分,谢谢@torazaburo。幸运的是,您可以直接在NodeList上应用过滤器,而不是通过数组转换。如下所示:

var arrayOfNodes = [].filter.call(document.querySelectorAll(".selected"), function(curNodeItem) {
     return shouldCurrentNodeBeRetained(curNodeItem)? true : false;
    //expanded for clarity.    
});

#2

querySelectorAll is a NodeList array-like collection, but it's not an array, since it doesn't inherit from Array.prototype. To convert it to real array you would use slice this way:

querySelectorAll是一个类似NodeList数组的集合,但它不是一个数组,因为它不从Array.prototype继承。要将其转换为真实数组,您可以使用切片:

var myArray = [].slice.call(document.querySelectorAll('.selected'));

It is possible to use slice like this due to the fact that Array.prototype.slice is intentionally generic method, meaning that it's internal implementation doesn't check if this value is actually Array instance. So slice can be used with any array-like objects, having numeric indexes and length property.

由于Array.prototype.slice是故意通用的方法,因此它可以使用像这样的切片,这意味着它的内部实现不检查该值是否实际上是Array实例。因此,slice可以与任何类似数组的对象一起使用,具有数字索引和length属性。

#3

document.querySelectorAll returns a NodeList, not an Array.

document.querySelectorAll返回NodeList,而不是Array。

Hence there is no Splice method on NodeList By default.

因此,NodeList上没有Splice方法默认情况下。

However you can prototype similar method for A node list.

但是,您可以为A节点列表原型化类似的方法。

Here is a working JSFiddle, it removes elements like splice directly from DOM, you can modify it however you wish.

这是一个有效的JSFiddle,它直接从DOM中删除拼接等元素,你可以随意修改它。

var myArray = [];
myArray = document.querySelectorAll('.selected');

//This is a primitive analogue of splice without adding new elements, it will not remove element from NodeList, however will remove it directly from dome, then it will return the resulting array (As Array), because NodeList is unmodifiable;
NodeList.prototype.splice = function(pos, numToRemove){
    var initRemCount = remCount = numToRemove ? numToRemove : 1;
    var removed = [];
    for(var i = 0; i < this.length; i++){
        if(!remCount)
            break;
        var elm = this[i];
        if(i >= pos){
            //elm.parentElement.removeChild(elm); //I commented this out, 'cause you say you dont want to delete members from DOM, uncomment this to do so
            remCount--;
        }
    }
    return [].slice.call(this, pos, pos + initRemCount); 
}

var resultArray = myArray.splice(2, 2);

//This is the Araay already not a NodeList
console.log(resultArray);

#1