Array-like objects, NodeList, HTMLCollection

Array-like objects

- 인덱스로 접근 가능하며, length 속성이 존재

- Array.prototype을 상속하지 않는다

- 배열의 네이티브 메소드는 쓸 수 없다

- HTMLCollection, NodeList, arguments ...

 

배열 메소드를 사용하고 싶다면

- Array.prototype.slice.call(arguments)

- Array.from( )

 

HTMLCollection

- getElementsBy..., element.children 으로 리턴되는 객체

- 유사 배열 객체. forEach( ) 메서드 사용 불가

- [ ... collection].map( ), 혹은 Array.from(collection).map( )

- 라이브 콜렉션

 

NodeList

: querySelector... 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체, 노드의 콜렉션

- forEach( )로 반복 가능, for문, for .. of 문 가능 + entries( ), keys( ), values( )

- Array.from( ) 사용하여 Array로 변환

- 경우에 따라 라이브 콜렉션이며, DOM의 변경 사항을 실시간으로 콜렉션에 반영 - Node.childNodes

- 보통 정적 콜렉션, DOM을 변경해도 콜렉션 내용에는 영향 X - document.querySelectorAll( )

 

---

www.nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/

developer.mozilla.org/ko/docs/Web/API/HTMLCollection

developer.mozilla.org/ko/docs/Web/API/NodeList