[ TypeScript / JavaScript ] DOM 객체 타입

 자바스크립트에서 DOM 객체는 각자 다른 타입을 가진다.

 

querySelector : Element (HTMLElement, SVGElement 등)

querySelectorAll : NodeList

getElementById : HTMLEelemt

getElementByClassName : HTMLCollection

getElementByTagName : HTMLCollection

 

Element:

• 모든 DOM 요소를 나타내며, 이는 HTMLElement 또는 SVGElement와 같이 더 구체적인 요소 타입으로 좁혀질 수 있다. Element는 기본적인 DOM 메소드를 포함하고 있어, 속성 접근이나 자식 요소 관리 등이 가능하다.

NodeList:

• querySelectorAll 메소드로 반환되며, 노드의 집합을 나타낸다. 이 컬렉션은 정적(라이브 컬렉션의 반대)이며, forEach 메소드로 순회할 수 있다, 일반적인 배열 메소드인 map, filter 등은 사용할 수 없다. 배열로 변환하려면 Array.from()을 사용해야 한다.

HTMLElement:

• getElementById 및 기타 특정 HTML 요소 선택 메소드로 반환되는 타입으로, HTML 요소에 특화된 타입이다.

HTMLCollection:

• getElementsByClassName과 getElementsByTagName 메소드로 반환되며, 문서 내에서 특정 클래스 또는 태그 이름을 가진 모든 HTML 요소의 살아있는(live) 컬렉션을 나타낸다. 이 컬렉션은 DOM의 변경사항이 실시간으로 반영되고, 컬렉션을 순회하는 도중 DOM이 수정되면 반복자가 영향을 받을 수 있다.