HTMLCollection과 Nodelist

티스토리 뷰

프론트엔드/JS

lee_jing 2021. 5. 20. 15:45

HTMLCollection?

문서내에 순서대로 정렬된 노드의 컬렉션이다.

가장 쉽게 HTMLCollection을 얻을 수 있는 방법은 엘레먼트의 children 프로퍼티에 접근하는 것이다.

console.log(document.body.children);
//HTMLCollection(4) [button.modal-toggle, div.modal, div.modal-overlay, script]

children과 childNodes의 차이점은 뭘까..?

childNodes

현재 노드의 자식 노드가 포함된 Nodelist를 반환한다.

주석과 줄바꿈 같은 비요소 노드까지 출력한다.

console.log(document.body.childNodes);
//NodeList(8) [text, button.modal-toggle, text, div.modal, text, div.modal-overlay, text, script]

children

현재 요소의 자식 노드가 포함된 HTMLCollection을 반환 비요소 노드 제외된다.

HTMLCollection 개체의 목록은 따로 변수에 담아 재 조회 하지 않아도 결과가 실시간으로 반영된다.

Nodelist?

element.childNodes 프로퍼티나 document.querySelectorAll 메서드로 반환되는 노드 모음이다.

childNodes는 라이브 콜렉션으로, DOM의 변경사항을 실시간으로 반영한다.

반면 querySelectorAll()의 NodeList는 정적 콜렉션으로, DOM이 변경되어도 collection의 내용에는 영향을 주지 않는다.

👀실시간으로 반영된다?

변경된 값에 대하여 따로 변수에 담지 않아도 된다는 뜻이다.

dom을 수정하는게 실시간으로 반영된다는 의미이 아니라 노드에 변경사항이 있는 경우, 그 변경사항이
변수에 담긴 HTMLCollection 데이터에서도 함께 반영된다는 의미이다.

유사배열

말 그대로 [ ] 식으로 배열과 유사하게 생긴 객체를 유사배열이라 한다.

위 설명한 HTMLCollection과 nodelist도 유사배열이다.

유사배열은 index와 length 프로퍼티를 가지고 있다. 하지만 배열은 아니라는 것!

Array.isArray(obj) 메서드를 사용하여 배열이 맞는지 확인할 수 있다.

인자로 유사배열을 넣으면 false 출력된다.

유사배열은 배열이 아니기 때문에 배열의 기본 메서드를 사용할 수 없다.

사용하고 싶으면 call이나 apply로 배열 메소드를 빌려올 수 있다.

ES6 의 array.form()로 더 간단히 사용할 수도 있다.

참고 사이트

공지사항