가짜 배열 Nodelist

 

예전 기억을 더듬어보니, '가짜 배열'  어쩌구저쩌구 했던것 같은데요.

왜 쓰이는건지 궁금해져 

정리해보기로 했습니다.

(요즘 왜 집착증에 걸렸다)

 

---

Nodelist

MDN에 나온 nodelist 설명.

배열이 아니라 유사배열이다.

• for, for...of, forEach를 사용하여 반복할 수 있다 
• element.childNodes 속성과 document.querySelectorAll 메소드에 의해 반환되는 콜렉션이다.
• element.childNodes 속성에서는 DOM의 변경을 반영한다.(라이브 콜렉션)
• document.querySelectorAll 속성에서는 DOM을 변경해도 영향을 주지 않는다.(정적 콜렉션)

querySelectorAll로 반환한 nodelist에는 뭔가를 한다고 값은 정적 콜렉션이어서 실시간으로 반영하지 않는다.

즉 중간에 append 로 DOM을 추가하는 함수가 있어도 추가하지 않는다.

 

유사배열의 차이

말 그대로 유사배열이기 때문에 배열에 적용할 수 있는 메소드가 제한된다.

 

• nodelist에서 적용 가능한 메소드
  • entries()
  • forEach()
  • item()
  • key()
  • values()
• HTMLCollection에서 적용 가능한 메소드
  • item()

일반 배열로 만들 수 있을까?

답은 예스. 

Array.from()을 사용해 배열로 바꾸어 배열의 메소드들을 그대로 사용할 수 있다.

 

const nodeList = document.querySelectorAll('.list');
const htmlCollection = document.getElementByClassName('list');

htmlCollection.forEach(list => list.addEventListener("click", func);
// 사용 불가

Array.from(nodeList).forEach(list => list.addEventListener("click", func);
// 사용 가능