<abbr>Öğelerin iç metnini değiştirmek için kısa bir komut dosyası üzerinde çalışıyordum , ancak bunun nodelistbir forEachyöntemi olmadığını gördüm . Bunun nodelistmiras almadığını biliyorum Array, ancak sahip olunması forEachyararlı bir yöntem gibi görünmüyor mu? Ben değilim, belirli bir uygulama sorunu ekleyerek bu engeller farkında var mıdır forEachiçin nodelist?

Not: Dojo ve jQuery'nin her ikisinin de forEachnodelistleri için bir formda olduklarının farkındayım . Sınırlamalar nedeniyle ikisini de kullanamıyorum.

NodeList artık tüm büyük tarayıcılarda forEach () içeriyor

MDN'deki nodeList forEach () öğesine bakın .

Orijinal cevap

Bu yanıtların hiçbiri NodeList'in neden Array'den miras almadığını, dolayısıyla ona sahip olmasına forEachve diğerlerinin hepsine izin verdiğini açıklamıyor .

Cevap bu es-talk başlığında bulunur . Kısacası, web'i bozar:

Sorun, instanceof'un hatalı olarak örneğin Array.prototype.concat ile kombinasyon halinde bir Array olduğu anlamına geldiğini varsayan koddu.

Google'ın Kapatma Kitaplığında, bu nedenle neredeyse tüm Google uygulamalarının başarısız olmasına neden olan bir hata vardı. Kitaplık bulunur bulunmaz güncellenmiştir, ancak yine de concat ile birlikte aynı yanlış varsayımı yapan kodlar olabilir.

Yani, bazı kodlar şöyle bir şey yaptı

if (x instanceof Array) {
  otherArray.concat(x);
} else {
  doSomethingElseWith(x);
}

Ancak, concat"gerçek" dizileri (Array örneğini değil) diğer nesnelerden farklı olarak ele alır:

[1, 2, 3].concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
[1, 2, 3].concat(4) // [1, 2, 3, 4]

Bu, yukarıdaki kodun xbir NodeList olduğu zaman kırıldığı anlamına gelir , çünkü daha önce doSomethingElseWith(x)yoldan aşağı inerken , daha sonra otherArray.concat(x), xgerçek bir dizi olmadığı için tuhaf bir şey yapan yoldan aşağı indi .

Bir süredir ElementsArray'in gerçek bir alt sınıfı olan ve "yeni DüğümListesi" olarak kullanılacak bir sınıf için bir öneri vardı . Bununla birlikte, çeşitli teknik ve spesifikasyonlarla ilgili nedenlerden dolayı henüz uygulanması mümkün olmadığından, en azından şimdilik DOM Standardından kaldırıldı .

Yapabilirsin

Array.prototype.forEach.call (nodeList, function (node) {

    // Your code here.

} );

Yeni bir düğüm dizisi oluşturmayı düşünebilirsiniz.

  var nodeList = document.getElementsByTagName('div'),

      nodes = Array.prototype.slice.call(nodeList,0); 

  // nodes is an array now.
  nodes.forEach(function(node){ 

       // do your stuff here.  

  });

Not: Bu, burada oluşturduğumuz düğüm referanslarının bir listesi / dizisidir, yinelenen düğümler yoktur.

  nodes[0] === nodeList[0] // will be true

Asla asla deme, 2016 yılı ve NodeListnesne forEachen son Chrome'da bir yöntem uyguladı (v52.0.2743.116).

Diğer tarayıcılar henüz bunu desteklemediği için üretimde kullanmak için henüz çok erken (FF 49'da test edildi), ancak bunun yakında standartlaştırılacağını tahmin ediyorum.

Kısacası, bu yöntemi uygulamak bir tasarım çelişkisidir.

MDN'den:

Neden bir NodeList'de forEach veya map kullanamıyorum?

NodeList, dizilere çok benzer ve bunların üzerinde Array.prototype yöntemlerini kullanmak cazip gelebilir. Ancak bu imkansızdır.

JavaScript, prototiplere dayalı bir miras mekanizmasına sahiptir. Dizi örnekleri, prototip zincirleri aşağıdaki gibi göründüğü için dizi yöntemlerini (forEach veya map gibi) devralır:

myArray --> Array.prototype --> Object.prototype --> null (bir nesnenin prototip zinciri, birkaç kez Object.getPrototypeOf çağrılarak elde edilebilir)

forEach, map ve benzerleri, Array.prototype nesnesinin kendi özellikleridir.

Dizilerden farklı olarak, NodeList prototip zinciri aşağıdaki gibi görünür:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype, item yöntemini içerir, ancak Array.prototype yöntemlerinden hiçbirini içermez, bu nedenle NodeLists üzerinde kullanılamazlar.

Kaynak: https://developer.mozilla.org/en-US/docs/DOM/NodeList ( NodeList'de neden forEach veya map kullanamıyorum? Bölümüne gidin )

NodeList üzerinde forEach kullanmak istiyorsanız, bu işlevi Array'den kopyalamanız yeterlidir:

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

Hepsi bu, şimdi onu Array için yaptığınız gibi kullanabilirsiniz:

document.querySelectorAll('td').forEach(function(o){
   o.innerHTML = 'text';
});

ES2015'te, artık forEachnodeList için yöntemi kullanabilirsiniz .

document.querySelectorAll('abbr').forEach( el => console.log(el));

MDN Bağlantısına Bakın

Bununla birlikte, HTML Koleksiyonlarını veya diğer dizi benzeri nesneleri kullanmak istiyorsanız, es2015'te Array.from()yöntemi kullanabilirsiniz . Bu yöntem, dizi benzeri veya yinelenebilir bir nesneyi (nodeList, HTML Koleksiyonları, dizeler vb. Dahil) alır ve yeni bir Array örneği döndürür. Bunu şu şekilde kullanabilirsiniz:

const elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( el => console.log(el));

Gibi Array.from()yöntem shimmable, sen böyle ES5 kodunda kullanabilirsiniz

var elements = document.getElementsByTagName('abbr');
Array.from(elements).forEach( function(el) {
    console.log(el);
});

Ayrıntılar için MDN sayfasına bakın.

Mevcut tarayıcı desteğini kontrol etmek için .

VEYA

es2015'in başka bir yolu da yayma operatörünü kullanmaktır.

[...document.querySelectorAll('abbr')].forEach( el => console.log(el));

MDN yayılma operatörü

Yayılma Operatörü - Tarayıcı Desteği

Çözümüm:

//foreach for nodeList
NodeList.prototype.forEach = Array.prototype.forEach;
//foreach for HTML collection(getElementsByClassName etc.)
HTMLCollection.prototype.forEach = Array.prototype.forEach;

NodeList, DOM API'nin bir parçasıdır. JavaScript için de geçerli olan ECMAScript bağlantılarına bakın. http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html . Bir düğüm döndürmek için nodeList ve salt okunur uzunluk özelliği ve öğe (dizin) işlevi.

Cevap, yinelemelisiniz. Alternatif yok. Foreach işe yaramayacak. Java DOM API bağlamalarıyla çalışıyorum ve aynı sorunu yaşıyorum.

NodeList.forEach belirtimi için MDN'yi kontrol edin .

NodeList.forEach(function(item, index, nodeList) {
    // code block here
});

IE'de akuhn'un cevabını kullanın :

[].forEach.call(NodeList, function(item, index, array) {
    // code block here
});