DOM 요소 컬렉션

1. DOM 요소 컬렉션

  ㅇ 유사 배열 객체 형태(타입)으로써, 
     - 대부분, 그 결과 내용이 실시간적으로 DOM 트리를 반영함

  ㅇ 종류 : HTMLCollection, NodeList, classList, childNodes
     - HTMLCollection, NodeList은, 특정 DOM 노드들의 선택 접근시 반환됨    ☞ DOM 노드 접근 참조


2. HTMLCollection

  ㅇ 실시간 반영(항상 현재를 반영)하는, 여러 HTML 구성 요소들을 담고있는 컬렉션 자료 형식

  ㅇ getElementsByTagName(),getElementsByClassName() 같은 메소드에 의해 반환되는 노드들의 컬렉션

  ㅇ 주요 멤버
     - length : 담고있는 요소 수
     - item(i) : i번째 요소
     - namedItem(name 또는 id) : 주어진 id 또는 name 속성 이름이 같은 요소


3. NodeList                          ☞ MDN NodeList 참조

  ㅇ 유사 배열 객체 이면서, 이터러블 임

  ㅇ 접근 가능한 노드 컬렉션
     - 개별 아이템은 인덱스에 의해 접근 가능

  ㅇ querySelectorAll()와 같은 메소드에 의해, 반환되는 노드들의 컬렉션

  ㅇ 실시간 미 반영
     - childNodes 프로퍼티의 반환 결과와 달리, 실시간 반영 않고, 지난 과거의 노드들의 컬렉션임

  ㅇ 주요 멤버
     - 프로퍼티 : length
     - 메소드 (NodeList.prototype) : item(i), forEach(), entries(), keys(), values()


4. classList 프로퍼티                ☞ MDN ClassList 참조

  ㅇ 실시간 반영(항상 현재를 반영)하는, class 이름 관리를 위한 컬렉션 유형

  ㅇ 이를통해, DOMTokenList 인터페이스 형태로, class 속성값(공백 구분된 문자열)들을 취득 가능

     * DOMTokenList 인터페이스는,    ☞ MDN DOMTokenList 참조
        . 공백으로 구분 된 문자열로 표현된 정렬된 문자열 토큰 집합을 말함
        . 주요 멤버
           .. length : 토큰 수
           .. item(i) : i번째 토큰을 취득
           .. contains(문자열) : 지정한 문자열(토큰)을 포함하고 있는가 여부
           .. add(문자열) : 지정한 문자열(토큰) 추가
           .. remove(문자열) : 지정한 문자열(토큰) 제거
           .. toggle(문자열) : 지정한 문자열(토큰)이, 없으면 추가, 있으면 제거


5. childNodes 프로퍼티  :  자식 노드 리스트 프로퍼티

  ㅇ 실시간 반영(항상 현재를 반영)하는, 살아있는, 자식 노드 정보 리스트
  ㅇ 모든 직계 자식 노드들을 가리키는 유사 배열 객체
  ㅇ 읽기 전용