DOM트리의 Node에 대한 분석

Document Object Model (DOM)을 통해 자바스크립트로 HTML 태그들을 조작하여 웹 페이지를 동적으로 만들 수 있다.

DOM은 객체지향 방식을 사용하여 구현한 트리로 트리의 각 노드는 HTML 태그들에 대한 정보를 가지고 있는 클래스의 인스턴스다.

실제 개발할때 쓰는 태그를 예시로 들어보자..

<div></div>

위 div 태그는 DOM트리의 여러 노드중 한 노드가 될텐데 이 div 노드는 HTMLDivElement 클래스의 인스턴스다. 그러니까

<div></div>
<div></div>

이렇게 div 태그가 HTML 문서에 여러개 작성되면 HTMLDivElement 클래스에서 인스턴스들을 여러개 찍어낸것이다..

그리고 이 HTMLDivElement 클래스는 Node 클래스를 상속하고 있다.
모든 HTML 요소 클래스들은 Node 클래스를 상속하고 있다.

class HTMLDivElement extends Node {
  
}

타입스크립트를 사용할때 자주 사용하던 이 HTMLDivElement 타입이 왜 사용되는지 이제 이해가 간다.

const handleClick = (e: MouseEvent<HTMLDivElement>) => {
	// ...
}