Tôi đang cố gắng thực hiện một vòng lặp đơn giản:

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

Nhưng tôi nhận được lỗi sau:

VM384: 53 Uncaught TypeError: Parent.children.forEach không phải là một chức năng

Mặc dù parent.childrennhật ký:

Điều gì có thể là vấn đề?

Lưu ý: Đây là một JSFiddle .

Tùy chọn đầu tiên: gọi forEach một cách gián tiếp

Đây parent.childrenlà một mảng giống như đối tượng. Sử dụng giải pháp sau:

const parent = this.el.parentElement;

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

Các parent.childrenlà NodeListloại, mà là một mảng như đối tượng vì:

• Nó chứa thuộc lengthtính, cho biết số lượng nút
• Mỗi nút là một giá trị thuộc tính có tên số, bắt đầu từ 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Xem thêm chi tiết trong bài viết này .

Tùy chọn thứ hai: sử dụng giao thức lặp

parent.childrenlà một HTMLCollection: thực hiện giao thức lặp . Trong môi trường ES2015, bạn có thể sử dụng HTMLCollectionvới bất kỳ cấu trúc nào chấp nhận lặp lại.

Sử dụng HTMLCollectionvới toán tử trải rộng:

const parent = this.el.parentElement;

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

Hoặc với for..ofchu trình (là tùy chọn ưa thích của tôi):

const parent = this.el.parentElement;

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

parent.childrenkhông phải là một mảng. Đó là HTMLCollection và nó không có forEachphương thức. Bạn có thể chuyển đổi nó thành mảng đầu tiên. Ví dụ trong ES6:

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

hoặc sử dụng toán tử trải rộng:

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

parent.childrensẽ trả về một danh sách danh sách nút , về mặt kỹ thuật là Bộ sưu tập html . Đó là một mảng giống như đối tượng, nhưng không phải là một mảng, vì vậy bạn không thể gọi các hàm mảng trực tiếp trên nó. Ở bối cảnh này, bạn có thể sử dụng Array.from()để chuyển đổi nó thành một mảng thực sự,

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

Một phiên bản ngây thơ hơn , ít nhất là bạn chắc chắn rằng nó sẽ hoạt động trên tất cả các thiết bị, không cần chuyển đổi và ES6:

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

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

parent.childrenlà một HTMLCollectionđối tượng giống như mảng. Đầu tiên, bạn phải chuyển đổi nó thành một phương thức thực Arrayđể sử dụng Array.prototype.

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

Đó là bởi vì parent.childrenlà một NodeList và nó không hỗ trợ .forEachphương thức (vì NodeList là một mảng giống như cấu trúc nhưng không phải là một mảng), vì vậy hãy thử gọi nó bằng cách trước tiên chuyển đổi nó thành mảng bằng cách sử dụng

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

Không cần choforEach , bạn chỉ có thể lặp lại bằng cách sử dụng fromtham số thứ hai, như vậy:

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

Nếu bạn đang cố gắng lặp lại NodeListnhư thế này:

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

Tôi rất khuyên bạn nên lặp nó theo cách này:

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

Cá nhân tôi đã thử một vài cách nhưng hầu hết chúng đều không hoạt động vì tôi muốn lặp lại NodeList , nhưng cách này hoạt động như một bùa mê, hãy thử xem!

Các NodeListkhông phải là một mảng, nhưng chúng tôi đối xử với nó như một mảng, sử dụngArray. Vì vậy, bạn cần phải biết rằng nó không được hỗ trợ trong các trình duyệt cũ!

Cần thêm thông tin về NodeList? Vui lòng đọc tài liệu của nó trên MDN .

Vì bạn đang sử dụng các tính năng của ES6 (các hàm mũi tên ), bạn cũng có thể chỉ cần sử dụng một vòng lặp for như thế này:

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

Bạn có thể kiểm tra xem bạn đã gõ forEach đúng chưa, nếu bạn gõ foreach như trong các ngôn ngữ lập trình khác thì nó sẽ không hoạt động.

Bạn có thể sử dụng childNodesthay vì children,childNodes cũng đáng tin cậy hơn khi xem xét các vấn đề tương thích trình duyệt, thêm thông tin ở đây :

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

hoặc sử dụng toán tử trải rộng:

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