giuntura Javascript per array di elementi DOM

Question

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

E quando ho chiamato myArray.splice - non era definito. Come posso evitare questo? Ho bisogno di rimuovere alcuni elementi DOM da quella matrice.

Answer 1

Il problema è che querySelectorAll(..) restituisce un elenco di nodi (NodeList) - non un array JS standard.

Può essere che ci si vuole qualcosa di simile di seguito:

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

---

UPDATE

ho perso la parte in cui si sta cercando di eliminare, grazie @torazaburo. Fortunatamente, puoi applicare direttamente il filtro su NodeList invece di passare attraverso una conversione di array. Qualcosa come di seguito:

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

Answer 2

querySelectorAll è un NodeListarray-like collection, ma non è un array, dal momento che non eredita da Array.prototype. Per convertirlo in serie vera e propria si può usare slice questo modo:

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

E 'possibile utilizzare slice come questo a causa del fatto che Array.prototype.slice è intenzionalmente metodo generico, il che significa che si tratta di implementazione interna non controlla se this il valore è in realtà l'istanza Array. Quindi slice può essere utilizzato con qualsiasi oggetto di tipo array, con indici numerici e proprietà length.

Answer 3

document.querySelectorAll restituisce una NodeList, non un array.

quindi non v'è alcun metodo su Splice NodeList Per default.

Tuttavia è possibile prototipare un metodo simile per un elenco di nodi.

Ecco una JSFiddle di lavoro, esso rimuove elementi come giunzione direttamente dal DOM, è possibile modificarlo tuttavia si desidera.

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);