Jak uzyskać dostęp do wszystkich opcji na pseudo-tablicach zwracanych przez querySelectorAll?

Question

Coś miłego zwykły javascript byłoby móc korzystać forEach, map, filter, etc, na pozycji zwracanych przez document.querySelectorAll, document.getElementsBy* itp

This'd prowadzić do zmniejszenia uzależnienia od jQuery i po prostu czystsze kodu . W tej chwili możemy to zrobić w brzydki sposób:

[].forEach.call(document.querySelectorAll(sel), function(el) { 
}); 

To jest ... gadatliwe.

W jaki sposób można od razu używać elementów od forEach po zwróconych elementach?

Answer 1

naiwny sposób byłoby to zrobić, jeśli testowany na Chrome:

NodeList.prototype.forEach = Array.prototype.forEach; 

To działa. W Webkit. Nie dotyczy to jednak Firefoksa. Bo FF zwraca HTMLCollection ...

Najbardziej sposób przeglądarki Znalazłem:

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach; 

To nie działa w IE8 i obniżyć chociaż, ponieważ dusić podczas dodawania właściwości do organizacji obiektów prototypy.

Pełna lista:

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach; 
NodeList.prototype.map = HTMLCollection.prototype.map = Array.prototype.map; 
NodeList.prototype.filter = HTMLCollection.prototype.filter = Array.prototype.filter; 
NodeList.prototype.reduce = HTMLCollection.prototype.reduce = Array.prototype.reduce; 
NodeList.prototype.reduceRight = HTMLCollection.prototype.reduceRight = Array.prototype.reduceRight; 
NodeList.prototype.every = HTMLCollection.prototype.every = Array.prototype.every; 
NodeList.prototype.some = HTMLCollection.prototype.some = Array.prototype.some; 

Lub, aby zadowolić naszego drogiego BERGI (a także dlatego, że jest czystsze):

['forEach', 'map', 'filter', 'reduce', 'reduceRight', 'every', 'some'].forEach(
    function(p) { 
    NodeList.prototype[p] = HTMLCollection.prototype[p] = Array.prototype[p]; 
}); 

Zważywszy link do perfectionkills, to w większości nieistotne tam. Problem polega na tym, że DOM w większości nie zachowuje się tak samo w przeglądarkach po rozszerzeniu. Ta modyfikacja jest poprawna we wszystkich przeglądarkach z wyjątkiem IE < = 8.

Answer 2

function forEach(a, fn) { 
    return [].forEach.call(a, fn); 
}; 

forEach(document.querySelectorAll(sel), function(el) { 
}); 

I wiele więcej:

function map(a, fn) { 
    return [].map.call(a, fn); 
}; 
function filter(a, fn) { 
    return [].filter.call(a, fn); 
}; 
function reduce(a, fn) { 
    return [].reduce.call(a, fn); 
}; 
function reduceRight(a, fn) { 
    return [].reduceRight.call(a, fn); 
}; 
function every(a, fn) { 
    return [].every.call(a, fn); 
}; 
function some(a, fn) { 
    return [].some.call(a, fn); 
}; 

Może trzeba będzie

[].slice.call(a) 

w niektórych sytuacjach.

function forEach(a, fn) { 
    return [].forEach.call([].slice.call(a), fn); 
} 

Answer 3

Jeśli nie podoba zmieniając prototypy i żeby wszystkie funkcje tablicy po prostu pracować, może łatwiej będzie po prostu przekonwertować swoją kolekcję do tablicy:

Array.from(document.querySelectorAll('a')) 

Wszystkie funkcje tablicy będzie dostępny , nie ma potrzeby, aby zaktualizować swój kod, gdy nowa wersja JavaScript jest uwalniany:

Array.from(document.querySelectorAll('a')).forEach(a => console.log(a))