JavaScript'te, bir NodeList'i bir diziye dönüştürmenin en iyi yolu nedir?

DOM yöntemi document.querySelectorAll()(ve birkaç tane daha) bir NodeList.

Listede işlem yapmak için, örneğin kullanarak forEach(), NodeListönce bir Array.

Dönüştürmek için en iyi yolu nedir NodeListbir etmek Array?

ES6 ile şunları yapabilirsiniz:

const spanList = [...document.querySelectorAll("span")];

ES6 ile kullanabilirsiniz Array.from(myNodeList). Ardından favori dizi yönteminizi kullanın.

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 1
Array.from(myNodeList).forEach(function(el) {
  console.log(el);
});

Bunun eski tarayıcılarda da çalışmasını sağlamak için bir ES6 dolgusu kullanın .

Bir aktarıcı kullanıyorsanız (örneğin Babel) iki alternatif daha vardır:

var myNodeList = document.querySelectorAll('.my-selector');

// ALT 2
for (var el of myNodeList) {
  el.classList.add('active'); // or some other action
}

// ALT 3
[...myNodeList].forEach((el) => {
  console.log(el);
});

Prototipteki sliceyöntemi kullanarak onu bir diziye dönüştürebilirsiniz Array:

var elList = document.querySelectorAll('.viewcount');
elList = Array.prototype.slice.call(elList, 0);

Tüm ihtiyaç vardır Dahası, forEach, sen çağırabilir o gelen Arrayilk bir diziye onu zorlamak olmadan prototip:

var elList = document.querySelectorAll('.viewcount');
Array.prototype.forEach.call(elList, function(el) {
    console.log(el);
});

ES6'da, Array.fromonu bir diziye dönüştürmek için yeni işlevi kullanabilirsiniz :

Array.from(elList).forEach(function(el) {
    console.log(el);
});

Bu şu anda yalnızca yeni tarayıcılarda geçerlidir, ancak bir polyfill hizmeti kullanıyorsanız , bu işleve tümüyle erişebilirsiniz.

Bir ES6 aktarıcısı kullanıyorsanız , for..ofbunun yerine bir döngü bile kullanabilirsiniz :

for (var element of document.querySelectorAll('.some .elements')) {
  // use element here
}

Neden dönüştürmek? - callArray'in doğrudan öğe koleksiyonundaki işlevi;)

[].forEach.call( $('a'), function( v, i) {
    // do something
});

$ ' ın querySelectorAll için takma adınız olduğunu varsayarsak , tabii ki

düzenleme: ES6 daha da kısa sözdizimi sağlar [...$('a')]( Mayıs 2014 itibariyle, yalnızca Firefox işlerin )

2020 güncellemesi: nodeList.forEach () artık resmi bir standarttır ve mevcut tüm tarayıcılarda desteklenmektedir.

Daha eski tarayıcılar aşağıdaki çoklu dolguyu kullanabilir.

Örneğin forEach () kullanarak javascript'teki listede çalışmak için, NodeList bir Array'e dönüştürülmelidir.

Bu doğru değil. .forEach()mevcut tarayıcılarda çalışır. Bu parametre eksik olursa, içinden .forEach () eklemek için bir polyfill kullanabilirsiniz Array için nodelist ve iyi çalışıyor:

if ( ! NodeList.prototype.forEach ) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Şimdi çalıştırabilirsiniz:

myNodeList.forEach(function(node){...})

NodeLists'i Diziler gibi yinelemek için.

Bu, her yerde .call () 'dan çok daha kısa ve daha temiz bir kod üretir.

Olmak zorunda mı forEach? forListeyi yinelemek için basitçe bir döngü kullanabilirsiniz :

for (var i = 0; i < elementList.length; i++) {
    doSomethingWith(elementlist.item(i));
}

ES6 gibi harika yollara izin verir var nodeArray = Array.from(nodeList)ama benim favorim yeni serpme operatörü.

var nodeArray = Array(...nodeList);

ES6'da benimle çalıştı

bunun gibi nodelistiniz olduğunu varsayalım

<ul>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="8:22">Flexbox video</li>
  <li data-time="3:24">Redux video</li>
  <li data-time="5:17">Flexbox video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="4:17">Flexbox video</li>
  <li data-time="2:17">Redux video</li>
  <li data-time="7:17">Flexbox video</li>
  <li data-time="9:54">Flexbox video</li>
  <li data-time="5:53">Flexbox video</li>
  <li data-time="7:32">Flexbox video</li>
  <li data-time="2:47">Redux video</li>
  <li data-time="9:17">Flexbox video</li>

</ul>


const items = Array.from(document.querySelectorAll('[data-time]'));

console.log(items);

Aşağıdakileri kullanıyorum çünkü okumanın en kolay yolu olduğunu düşünüyorum:

const elements = document.getElementsByClassName('element');
[...elements].forEach((element) => {
   // code
});

Bu benim için de geçerli:

const elements = Object.values( document.querySelector(your selector here) )

Object.values()Arrayverilen nesnenin değerlerinin getirileri . NodeListJS'deki her şey gibi nesnedir.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Ancak IE ile uyumlu değil, bu yüzden Array.prototype.*array_method*.call(yourNodeList)en iyi seçenek sanırım . Bununla, herhangi bir dizi yönteminiNodeList

Elemlerin bir düğüm listesi olduğunu varsayarsak :

var elems = document.querySelectorAll('select option:checked');

daha sonra aşağıdaki gibi bir diziye dönüştürülebilir:

var values = [].map.call(elems, function(obj) {
  return obj.value;
});

Referans: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example:_using_map_generically_querySelectorAll