[JS] HTMLCollection vs NodeList

✅ HTMLCollection와 NodeList

DOM API가 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체.

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

 

✅ HTMLCollection

- getElementByTagName()

- getElementByClassName()

- 자식노드 가져오려면, children 프로퍼티 호출

 

1) DOM에 새로운 요소 추가되면, 새로운 요소 가져옴 -> "동적"

2) <div>, <span>, <p>와 같은 요소 노드만 포함

3) id, name, 인덱스로 자식 요소 노드에 접근 가능

   -> id와 name은 ".nameItem(id명 or name명)" 메서드로 가능

4) forEach문 x. 유사배열객체로 각 요소 접근을 위해 for of문 사용

 

 

✅ NodeList

- getElementByName()

- querySelectorAll()

- 자식노드 가져오려면, childNodes 프로퍼티 호출

 

1) DOM에 새로운 요소 추가되면, 새로운 요소 가져오지 x -> "정적"

2) 요소 노드, 속성 노드, 텍스트 노드 등 포함

3) id, name으로 자식 요소 노드로 접근 x, 인덱스로만 자식 요소 노드에 접근 가능

4) forEach문 o