DOM 요소 컬렉션

(2022-07-29)

HTMLCollection, NodeList, classList, childNodes


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 프로퍼티  :  자식 노드 리스트 프로퍼티실시간 반영(항상 현재를 반영)하는, 살아있는, 자식 노드 정보 리스트
  ㅇ 모든 직계 자식 노드들을 가리키는 유사 배열 객체
  ㅇ 읽기 전용

JS DOM 제어
   1. DOM 트리 모델   2. DOM 트리,노드   3. DOM 메소드   4. DOM 프로퍼티   5. DOM 노드 접근   6. DOM 요소 컬렉션   7. DOM 크기,위치  


Copyrightⓒ written by 차재복 (Cha Jae Bok)       기술용어해설 소액 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"