Mengapa document.querySelectorAll mengembalikan StaticNodeList daripada Array yang sebenarnya?

Itu mengganggu saya yang tidak bisa saya lakukan document.querySelectorAll(...).map(...)bahkan di Firefox 3.6, dan saya masih tidak dapat menemukan jawaban, jadi saya pikir saya akan posting silang di SO pertanyaan dari blog ini:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

Adakah yang tahu tentang alasan teknis mengapa Anda tidak mendapatkan Array? Atau mengapa StaticNodeList tidak mewarisi dari Array dengan cara seperti yang dapat Anda gunakan map, concat, etc?

(BTW jika itu hanya satu fungsi yang Anda inginkan, Anda dapat melakukan sesuatu seperti NodeList.prototype.map = Array.prototype.map;... tetapi sekali lagi, mengapa fungsi ini (sengaja?) Diblokir sejak awal?)

Saya yakin ini adalah keputusan filosofis W3C. Desain [spesifikasi] W3C DOM cukup ortogonal dengan desain JavaScript, karena DOM dimaksudkan untuk menjadi platform dan bahasa yang netral.

Keputusan seperti " getElementsByFoo()mengembalikan urutan NodeList" atau " querySelectorAll()mengembalikan StaticNodeList" sangat disengaja, sehingga implementasi tidak perlu khawatir tentang menyelaraskan struktur data yang dikembalikan berdasarkan implementasi yang bergantung pada bahasa (seperti .maptersedia di Array di JavaScript dan Ruby, tetapi tidak ada dalam Daftar di C #).

W3C Tujuan rendah: mereka akan mengatakan NodeListharus berisi readonly .lengthproperti jenis unsigned panjang karena mereka percaya setiap pelaksanaan kaleng setidaknya dukungan yang , tetapi mereka tidak akan mengatakan secara eksplisit bahwa []Operator indeks harus kelebihan beban untuk mendukung mendapatkan elemen posisi, karena mereka tidak ingin menghalangi beberapa bahasa kecil yang buruk yang ingin diterapkan getElementsByFoo()tetapi tidak dapat mendukung kelebihan beban operator. Ini adalah filosofi umum yang ada di sebagian besar spesifikasi.

John Resig telah menyuarakan opsi yang sama seperti milik Anda, yang dia tambahkan :

Argumen saya tidak begitu banyak yang NodeIteratortidak terlalu mirip DOM, tetapi tidak terlalu mirip JavaScript. Itu tidak memanfaatkan fitur yang ada dalam bahasa JavaScript dan menggunakannya dengan kemampuan terbaiknya ...

Saya agak berempati. Jika DOM ditulis secara khusus dengan mempertimbangkan fitur JavaScript, itu akan menjadi jauh lebih tidak canggung dan lebih intuitif untuk digunakan. Pada saat yang sama, saya memahami keputusan desain W3C.

Anda dapat menggunakan operator penyebaran ES2015 (ES6) :

[...document.querySelectorAll('div')]

akan mengubah StaticNodeList menjadi Array of items.

Berikut ini contoh cara menggunakannya.

[...document.querySelectorAll('div')].map(x => console.log(x.innerHTML))

<div>Text 1</div>
<div>Text 2</div>

Saya tidak tahu mengapa ini mengembalikan daftar node daripada array, mungkin karena seperti getElementsByTagName itu akan memperbarui hasil ketika Anda memperbarui DOM. Bagaimanapun, metode yang sangat sederhana untuk mengubah hasil itu menjadi array sederhana adalah:

Array.prototype.slice.call(document.querySelectorAll(...));

dan kemudian Anda dapat melakukan:

Array.prototype.slice.call(document.querySelectorAll(...)).map(...);

Hanya untuk menambah apa yang dikatakan Crescent,

jika hanya satu fungsi yang Anda inginkan, Anda dapat melakukan sesuatu seperti NodeList.prototype.map = Array.prototype.map

Jangan lakukan ini! Sama sekali tidak dijamin berhasil.

Tidak ada standar JavaScript atau DOM / BOM yang menentukan bahwa fungsi NodeListkonstruktor bahkan ada sebagai global / windowproperti, atau yang NodeListdikembalikan oleh querySelectorAllakan mewarisi darinya, atau bahwa prototipe-nya dapat ditulis, atau bahwa fungsi Array.prototype.maptersebut benar-benar akan berfungsi pada NodeList.

NodeList diizinkan untuk menjadi 'objek host' (dan merupakan salah satunya, di IE dan beberapa browser lama). The Arraymetode didefinisikan sebagai diizinkan untuk beroperasi pada 'objek asli' setiap JavaScript yang mengekspos numerik dan lengthproperti, tapi mereka tidak diharuskan untuk bekerja pada objek host (dan di IE, mereka tidak).

Sangat menjengkelkan karena Anda tidak mendapatkan semua metode array pada daftar DOM (semuanya, bukan hanya StaticNodeList), tetapi tidak ada cara yang dapat diandalkan untuk memutarnya. Anda harus mengonversi setiap daftar DOM yang Anda dapatkan kembali ke Array secara manual:

Array.fromList= function(list) {
    var array= new Array(list.length);
    for (var i= 0, n= list.length; i<n; i++)
        array[i]= list[i];
    return array;
};

Array.fromList(element.childNodes).forEach(function() {
    ...
});

Saya pikir Anda cukup mengikuti

Array.prototype.map.call(document.querySelectorAll(...), function(...){...});

Ini bekerja sempurna untuk saya

Ini adalah opsi yang ingin saya tambahkan ke berbagai kemungkinan lain yang disarankan oleh orang lain di sini. Ini dimaksudkan untuk kesenangan intelektual saja dan tidak disarankan .

Hanya untuk iseng , berikut cara untuk "memaksa" querySelectorAllberlutut dan membungkuk kepada Anda:

Element.prototype.querySelectorAll = (function(QSA){
    return function(){
        return [...QSA.call(this, arguments[0])]
    }
})(Element.prototype.querySelectorAll);

Sekarang rasanya menyenangkan untuk melangkah ke seluruh fungsi itu, menunjukkan siapa bosnya. Sekarang saya tidak tahu apa yang lebih baik, membuat pembungkus fungsi bernama baru dan kemudian meminta semua kode Anda menggunakan nama aneh itu (cukup banyak gaya jQuery) atau menimpa fungsi seperti di atas sekali sehingga sisa kode Anda masih bisa untuk menggunakan nama metode DOM asli querySelectorAll.

• Pendekatan seperti itu akan menghilangkan kemungkinan penggunaan sub-metode

Saya tidak akan merekomendasikan ini dengan cara apa pun, kecuali jika Anda benar-benar tidak memberi [Anda tahu apa].