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

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)
});

스 니펫 확장