ele.children 속성 HTML Collection 자료형 forEach 반복문 돌리기

- HTML 요소의 children 속성과 데이터 타입 -

const ele = document.querySelector('#target');
const chld = ele.children;

HTML 엘리먼트의 children 속성은 자료형이 HTML Collection 이다.
list처럼 보이기는 하지만, 엄밀히 말해서 list는 아니다.

forEach 반복문은 인덱스를 따로 설정할 필요 없이 
배열 안에 있는 요소들로 반복문을 돌릴 수 있는 편한 함수다.
하지만 forEach는 배열에서 쓸 수 있는 함수이기 때문에
HTML Collection 은 forEach를 쓸 수 없다.

- HTML Collection 반복문 돌리는 법 -

그럼 HTML Collection 데이터는 반복물을 돌릴 수 없을까?

HTML Collection 도 반복문을 돌릴 수 있는 방법이 있기는 하다.
forEach보다는 조금 더 번거롭지만, for문을 이용하는 방법이다.
HTML Collection은 안에 들어 있는 요소들이 몇 개인지 length 속성을 가지고 있다.
또한 target[3]처럼 숫자 인덱스로 특정 요소들에 접근할 수도 있다.

이 두 가지를 활용하면 사실상 forEach와 같은 효과를 낼 수 있다.

바로 for문을 돌릴 수 있기 때문이다.

const ele = document.querySelector('#target');
const chld = ele.children;
const codeList = [];
for(i = 0; i < chld.length; i++) {
	codeList.push(chld[i].dataset.code);
};