HTMLCollection
HTMLCollection은 유사배열이다.
for...of를 통해 배열의 요소 하나하나에 접근할 수 있다.
id 속성을 활용해서 태그 선택하기
getElementById( )
id를 이용해서 태그를 선택할 때 존재하는 태그를 가져오면 태그 전체의 값을 받아올 수 있다.
id를 이용해서 태그를 선택할 때 존재하지 않는 태그를 가져오면 null이 출력된다.
class 속성을 활용해서 태그 선택하기
- getElementsByClassName( )
- 동일한 클래스를 가진 태그들을 선택하면, HTMLCollection[ ] 이라는 배열로 나오는 것을 확인할 수 있다.
- 배열의 메서드는 사용할 수 없지만 각 값들마다 index, length 프로퍼티로 접근할 수 있다.
- 클래스가 1개밖에 없는 값에 접근하면, HTMLCollection[ ]에 요소 1개가 들어있는 것이 출력된다.
- 존재하지 않는 class값을 선택하면, 빈 HTMLCollection[ ]이 출력된다.
NodeList
NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll과 같은 메서드에 의해 반환되는 NodeCollection이다.
HTMLCollection과 비슷하게 배열은 아니지만 유사배열이기때문에 for 문이나 forEach()를 사용하여 반복할 수 있다. 만약 배열로 사용하고 싶으면 Array.from()을 사용해서 배열로도 변환할 수 있다.
NodeList는 LiveCollection이라서 DOM의 변경 사항을 실시간으로 반영을 한다.
HTMLCollection & NodeList
HTMLCollection이나 NodeList는 요소를 찾아서 해당 요소가 모여있는 결과들을 모아놓은 것이라고 생각할 수 있다.
두 가지 모두 공통적으로 복수의 요소(element), 즉 element의 집합을 가져온다.두 가지 모두 length property, index를 활용할 수 있는데 여기서 차이점을 살펴보면
<li name="test1"> 혹은 <li id="test2">라는 형식으로 작성된 요소가 존재한다면, HTMLCollection은 해당 name에도 접근하는 것이다.
반면 NodeList의 경우 li element의 name과 id에는 접근하지 못 하고 예외가 발생하게 된다.
그래서 NodeList는 element의 index를 활용해야만 되는 것이다.
HTMLCollection과 NodeList중 DOM element에 접근할 때 무엇을 활용하는 것이 좋을까?
HTMLCollection, NodeList 둘 다 length, index를 활용하지만
HTMLCollection은 name과 id로도 접근할 수 있는 반면에
NodeList는 인덱스로만 접근이 가능하다.또, HTMLCollection의 경우 문서가 바뀔 때 마다 실시간으로 업데이트가 되는 Live Collection이고, NodeList는 DOM의 변경사항을 실시간으로 반영하지만, document.querySelectorAll() 메서드에 의해 반환되기때문에 Static Collection으로 DOM의 변경사항이 실시간으로 반영되지 않는다.
그렇기 때문에 index로 값을 접근할 때 NodeList의 길이가 실시간으로 변경될 경우, 예외가 발생할 수 있기때문에 index외에도 name, id로도 접근이 가능한 HTMLCollection을 활용하는 것이 더 좋을 수 있다.
