Basit bir döngü yapmaya çalışıyorum:

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

Ancak aşağıdaki hatayı alıyorum:

VM384: 53 Yakalanmayan TypeError: parent.children.forEach bir işlev değil

parent.childrenGünlükler olmasına rağmen :

Sorun ne olabilir?

Not: İşte bir JSFiddle .

İlk seçenek: dolaylı olarak her birini çağırın

parent.childrenNesne gibi bir dizi olduğunu. Aşağıdaki çözümü kullanın:

const parent = this.el.parentElement;

Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

parent.childrenİsimli NodeListnesne çünkü böyle bir Array türü:

• lengthDüğüm sayısını gösteren özelliği içerir
• Her düğüm, 0'dan başlayarak sayısal ada sahip bir özellik değeridir: {0: NodeObject, 1: NodeObject, length: 2, ...}

Bu makalede daha fazla ayrıntı görün .

İkinci seçenek: yinelenebilir protokolü kullanın

parent.childrenbir HTMLCollection: yinelenebilir protokol uygular . ES2015 ortamında, HTMLCollectionyinelenebilirleri kabul eden herhangi bir yapıda kullanabilirsiniz.

HTMLCollectionForma operatörü ile kullanın :

const parent = this.el.parentElement;

[...parent.children].forEach(child => {
  console.log(child);
});

Veya for..ofdöngü ile (bu benim tercih ettiğim seçenek):

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}

parent.childrenbir dizi değil. HTMLCollection ve forEachyöntemi yoktur. Önce diziye dönüştürebilirsiniz. Örneğin ES6'da:

Array.from(parent.children).forEach(child => {
    console.log(child)
});

veya forma operatörünü kullanarak:

[...parent.children].forEach(function (child) {
    console.log(child)
});

parent.childrendüğüm listesi listesi, teknik olarak bir html Koleksiyonu döndürür . Nesne gibi bir dizi, ancak bir dizi değil, bu nedenle dizi işlevlerini doğrudan çağıramazsınız. Bu bağlamda, bunu Array.from()gerçek bir diziye dönüştürmek için kullanabilirsiniz ,

Array.from(parent.children).forEach(child => {
  console.log(child)
})

Daha saf bir sürüm, en azından dönüşüm ve ES6 olmadan tüm cihazlarda çalışacağından eminsiniz:

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

parent.childrena, HTMLCollectionnesne dizi benzeri olan. Öncelikle, bir gerçek dönüştürmek zorunda Arraykullanımı Array.prototypeyöntemlerle.

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})

Bunun nedeni parent.childrenbir NodeList olması ve .forEachyöntemi desteklememesidir (NodeList, yapı gibi bir dizi değil, bir dizi değil), bu yüzden önce onu kullanarak diziye dönüştürerek çağırmayı deneyin.

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

Gerek yokforEach , sadece from's ikinci parametresini kullanarak yineleyebilirsiniz , şöyle:

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

Bunun NodeListgibi bir döngü üzerinde çalışıyorsanız :

const allParagraphs = document.querySelectorAll("p");

Bu şekilde döngü tavsiye ederim:

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

Şahsen, birkaç yol denedim ama çoğu bir döngü üzerinde çalışmak istediğim gibi çalışmadı NodeList, ama bu bir cazibe gibi çalışıyor, bir deneyin!

Bu NodeListbir Array değil, ancak bunu Array olarak ele alıyoruz, Array.Yani kullanarak , eski tarayıcılarda desteklenmediğini bilmeniz gerekir!

Hakkında daha fazla bilgiye NodeListmi ihtiyacınız var ? Lütfen MDN ile ilgili belgelerini okuyun .

ES6'nın özelliklerini ( ok işlevleri ) kullandığınız için , aşağıdaki gibi bir for döngüsü de kullanabilirsiniz :

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

Yazdığınız olmadığını kontrol edebilirsiniz forEach doğru yazdığınız takdirde, foreach işe yaramaz diğer programlama dillerinde gibi.

Sen kullanabilirsiniz childNodesyerine children, childNodesaynı zamanda tarayıcı uyumluluk sorunları, fazla bilgi göz önüne alındığında daha güvenilir burada :

parent.childNodes.forEach(function (child) {
    console.log(child)
});

veya forma operatörünü kullanarak:

[...parent.children].forEach(function (child) {
    console.log(child)
});