간단한 루프를 만들려고합니다.

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

그러나 다음과 같은 오류가 발생합니다.

VM384 : 53 Uncaught TypeError : parent.children.forEach는 함수가 아닙니다

parent.children로그 에도 불구하고 :

무엇이 문제 일 수 있습니까?

참고 : 다음은 JSFiddle 입니다.

첫 번째 옵션 : forEach를 간접적으로 호출

은 parent.children객체와 같은 배열입니다. 다음 해결책을 사용하십시오.

const parent = this.el.parentElement;

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

parent.childrenIS의 NodeList객체 때문에 같은 배열 인 유형 :

• 그것은 포함 length노드 수를 나타내는 특성
• 각 노드는 0부터 시작하는 숫자 이름의 특성 값입니다. {0: NodeObject, 1: NodeObject, length: 2, ...}

이 기사 에서 자세한 내용을 참조하십시오 .

두 번째 옵션 : 반복 가능한 프로토콜 사용

parent.children는 HTMLCollection: 어떤 구현하는 반복 가능한 프로토콜을 . ES2015 환경에서는 HTMLCollectioniterables를 허용하는 모든 구성과 함께 사용할 수 있습니다 .

HTMLCollection스프레드 연산자와 함께 사용하십시오 .

const parent = this.el.parentElement;

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

또는 for..of주기 (내가 선호하는 옵션) 와 함께 :

const parent = this.el.parentElement;

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

parent.children배열이 아닙니다. HTMLCollection이며 forEach메서드 가 없습니다 . 먼저 배열로 변환 할 수 있습니다. 예를 들어 ES6에서 :

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

또는 스프레드 연산자 사용 :

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

parent.children기술적으로 html Collection 인 노드 목록 목록 을 반환합니다 . 그것은 객체와 같은 배열이지만 배열은 아니므로 직접 배열 함수를 호출 할 수 없습니다. 이러한 맥락에서이를 실제 배열로 변환하는 데 사용할 수 있습니다 .Array.from()

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

좀 더 순진한 버전이라면 적어도 변환과 ES6없이 모든 장치에서 작동 할 것이라고 확신합니다.

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

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

parent.children는 HTMLCollection배열과 같은 객체입니다. 먼저, 메소드 Array를 사용하려면 실제로 변환해야 Array.prototype합니다.

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

그 때문에 parent.childrenA는 NodeList를 , 그리고 상기지지 않는다 .forEach(NodeList의 구조가 아니라 배열처럼 배열이기 때문에) 따라서, 첫번째 방법을 사용하여 배열로 변환하여 호출 할

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

의 필요forEach 는 없으며 다음 from과 같이의 두 번째 매개 변수 만 사용하여 반복 할 수 있습니다 .

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

다음 NodeList과 같이 반복하려고 하면 :

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

이런 식으로 루프하는 것이 좋습니다.

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

개인적으로, 나는 여러 가지 방법을 시도했지만 대부분을 반복하고 싶었으므로 대부분 작동하지 않았습니다. NodeList 매력적 시도해보십시오!

은 NodeList배열이 아니라 우리가 사용하는 배열로 취급Array. 그래서, 당신은이 오래된 브라우저에서 지원되지 않는다는 것을 알아야합니다!

에 대한 자세한 정보가 필요하십니까 NodeList? MDN에 대한 설명서를 읽으십시오 .

ES6의 기능 ( 화살표 기능 )을 사용하므로 다음과 같이 for 루프 를 사용할 수도 있습니다 .

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

사용자가 입력하면 확인할 수 있습니다 대해 forEach를 올바르게 입력 한 경우, foreach 문을 작동하지 않습니다 다른 프로그래밍 언어처럼.

당신이 사용할 수있는 childNodes대신에 children, childNodes또한 브라우저 호환성 문제, 추가 정보를 고려하고 더 신뢰할 여기를 :

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

또는 스프레드 연산자 사용 :

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