Question

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

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

Answer 1

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

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

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

<强>更新

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

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

Answer 2

querySelectorAll是NodeList array-like collection，但它不是数组，因为它不会从Array.prototype继承。要将其转换为真实数组，您可以这样使用slice：

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

由于Array.prototype.slice是故意的通用方法，这意味着它的内部实现不会检查slice值是否实际{{}}，因此可以使用this这样的Array 1}}实例。所以slice可以用于任何具有数字索引和length属性的类数组对象。

Answer 3

document.querySelectorAll会返回NodeList，而不是数组。

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

但是，您可以为A节点列表创建类似的方法原型。

这是一个有效的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);

Javascript拼接DOM元素数组

3 个答案: