用于 DOM 元素数组的 Javascript 拼接

Javascript splice for array of DOM elements

本文关键字：Javascript 拼接 数组 DOM 元素 用于      更新时间：2023-09-26
var myArray = [];
myArray = document.querySelectorAll('.selected');

当我调用myArray.splice时 - 它是未定义的。我怎样才能避免这种情况？我需要从该数组中删除一些 DOM 元素。

问题是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.    
});
querySelectorAll是一个

类似数组NodeList集合，但它不是一个数组，因为它不继承自Array.prototype。要将其转换为实数组，您将slice以下方式使用：

var myArray = [].slice.call(document.querySelectorAll('.selected'));
可以使用

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

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

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

但是，您可以为 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);
相关文章：