Bagaimana cara mengubah daftar simpul DOM menjadi array di Javascript?

Saya memiliki fungsi Javascript yang menerima daftar node HTML, tetapi mengharapkan array Javascript (menjalankan beberapa metode Array di atasnya) dan saya ingin memberi makan output Document.getElementsByTagNameyang mengembalikan daftar node DOM.

Awalnya saya berpikir untuk menggunakan sesuatu yang sederhana seperti:

Array.prototype.slice.call(list,0)

Dan itu berfungsi dengan baik di semua browser, kecuali tentu saja Internet Explorer yang mengembalikan kesalahan "objek JScript diharapkan", karena tampaknya daftar simpul DOM yang dikembalikan oleh Document.getElement*metode bukan objek JScript yang cukup untuk menjadi target pemanggilan fungsi.

Peringatan: Saya tidak keberatan menulis kode khusus Internet Explorer, tetapi saya tidak diizinkan menggunakan pustaka Javascript apa pun seperti JQuery karena saya menulis widget untuk disematkan ke situs web pihak ketiga, dan saya tidak dapat memuat pustaka eksternal yang akan menciptakan konflik untuk klien.

Upaya terakhir saya adalah mengulang daftar simpul DOM dan membuat array sendiri, tetapi adakah cara yang lebih baik untuk melakukannya?

NodeLists adalah objek host , menggunakan Array.prototype.slicemetode pada objek host tidak dijamin akan berfungsi, Spesifikasi ECMAScript menyatakan:

Apakah fungsi slice dapat berhasil diterapkan ke objek host bergantung pada implementasi.

Saya akan merekomendasikan Anda untuk membuat fungsi sederhana untuk mengulang NodeListdan menambahkan setiap elemen yang ada ke array:

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

MEMPERBARUI:

Seperti yang disarankan jawaban lain, Anda sekarang dapat menggunakan di lingkungan modern sintaks penyebaran atau Array.frommetode:

const array = [ ...nodeList ] // or Array.from(nodeList)

Tetapi memikirkannya, saya kira kasus penggunaan yang paling umum untuk mengonversi NodeList menjadi Array adalah mengulanginya, dan sekarang NodeList.prototypeobjek tersebut memiliki forEachmetode aslinya , jadi jika Anda berada di lingkungan modern Anda dapat menggunakannya secara langsung, atau memiliki sebuah pollyfill.

Di es6 Anda bisa menggunakan sebagai berikut:

• Operator penyebar

   var elements = [... nodelist]

• Menggunakan Array.from

   var elements = Array.from(nodelist)

referensi lebih lanjut di https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Menggunakan spread (ES2015) , semudah:[...document.querySelectorAll('p')]

(opsional: gunakan Babel untuk memindahkan kode ES6 di atas ke sintaks ES5)

Cobalah di konsol browser Anda dan lihat keajaibannya:

for( links of [...document.links] )
  console.log(links);

Gunakan trik sederhana ini

<Your array> = [].map.call(<Your dom array>, function(el) {
    return el;
})

Meskipun ini bukan tipuan yang tepat, karena tidak ada spesifikasi yang memerlukan pengerjaan elemen DOM, saya telah membuatnya untuk memungkinkan Anda menggunakan slice()dengan cara ini: https://gist.github.com/brettz9/6093105

PEMBARUAN : Ketika saya mengangkat ini dengan editor spesifikasi DOM4 (menanyakan apakah mereka mungkin menambahkan batasan mereka sendiri ke objek host (sehingga spesifikasi akan mengharuskan pelaksana untuk mengonversi objek ini dengan benar ketika digunakan dengan metode array) di luar spesifikasi ECMAScript yang diperbolehkan untuk implementasi-independensi), dia menjawab bahwa "Objek host kurang lebih sudah usang menurut ES6 / IDL." Saya melihat per http://www.w3.org/TR/WebIDL/#es-array bahwa spesifikasi dapat menggunakan IDL ini untuk mendefinisikan "objek larik platform" tetapi http://www.w3.org/TR/domcore/ tidak Sepertinya tidak menggunakan IDL baru untuk HTMLCollection(meskipun sepertinya IDL baru digunakan untuk Element.attributesitu meskipun hanya secara eksplisit menyatakan bahwa ia menggunakan WebIDL untuk DOMString dan DOMTimeStamp). Saya melihat[ArrayClass](yang mewarisi dari Array.prototype) digunakan untuk NodeList(dan NamedNodeMapsekarang tidak digunakan lagi untuk mendukung satu-satunya item yang masih akan menggunakannya, Element.attributes). Bagaimanapun, sepertinya itu akan menjadi standar. ES6 Array.frommungkin juga lebih nyaman untuk konversi seperti itu daripada harus menentukan Array.prototype.slicedan lebih jelas secara semantik daripada [].slice()(dan bentuk yang lebih pendek, Array.slice()("array generik"), sejauh yang saya tahu, tidak menjadi perilaku standar).

Saat ini, di tahun 2018, kita dapat menggunakan ECMAScript 2015 (Edisi ke-6) atau ES6, tetapi tidak semua browser dapat memahaminya (misalnya IE tidak memahami semuanya). Jika mau, Anda bisa menggunakan ES6 sebagai berikut: var array = [... NodeList];( sebagai operator penyebaran ) atau var array = Array.from(NodeList);.

Dalam kasus lain (jika Anda tidak dapat menggunakan ES6), Anda dapat menggunakan cara terpendek untuk mengonversi a NodeListmenjadi Array:

var array = [].slice.call(NodeList, 0);.

Sebagai contoh:

var nodeList = document.querySelectorAll('input');
//we use "{}.toString.call(Object).slice(8, -1)" to find the class name of object
console.log({}.toString.call(nodeList).slice(8, -1)); //NodeList

var array = [].slice.call(nodeList, 0);
console.log({}.toString.call(array).slice(8, -1)); //Array

var result = array.filter(function(item){return item.value.length > 5});

for(var i in result)
  console.log(result[i].value); //credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Tetapi jika Anda ingin mengulang DOMdaftar node dengan mudah saja, maka Anda tidak perlu mengonversi a NodeListke an Array. Dimungkinkan untuk mengulang item dalam NodeListmenggunakan:

var nodeList = document.querySelectorAll('input');
// Calling nodeList.item(i) isn't necessary in JavaScript
for(var i = 0; i < nodeList.length; i++)
    console.log(nodeList[i].value); //trust, credit, confidence

<input type="text" value="trust"><br><br>
<input type="text" value="credit"><br><br>
<input type="text" value="confidence">

Jangan tergoda untuk menggunakan for...inatau for each...inmenghitung item dalam daftar, karena itu juga akan menghitung properti panjang dan item dari NodeListdan menyebabkan kesalahan jika skrip Anda menganggapnya hanya harus berurusan dengan objek elemen. Juga, for..intidak dijamin untuk mengunjungi properti dalam urutan tertentu. for...ofloop akan mengulang objek NodeList dengan benar.

Lihat juga:

• Dokumentasi NodeList

var arr = new Array();
var x= ... get your nodes;

for (i=0;i<x.length;i++)
{
  if (x.item(i).nodeType==1)
  {
    arr.push(x.item(i));
  }
}

Ini harus bekerja, lintas browser dan memberi Anda semua "elemen" node.