[Javascript] EventTarget, Node, Element, HTMLElement 간단 정리

📢 들어가며

웹 개발을 하다 보면 브라우저가 제공하는 다양한 DOM 관련 클래스를 보게 된다. 그중에서도 EventTarget, Node, Element, HTMLElement는 가장 기본이자 자주 등장하는 네 가지로, DOM 구조와 이벤트 동작을 이해하는 데 핵심적인 역할을 한다.

 

 

🎈 EventTarget

이름에서도 알 수 있듯이, 모든 이벤트 발생 대상이 구현하는 기본 인터페이스이다.
이벤트를 등록하는 데 자주 쓰이는 Element뿐 아니라 AudioContext 같은 비 DOM 객체도 EventTarget을 상속한다.

 

주요 메서드

• addEventListener()
• removeEventListener()
• dispatchEvent()

Element가 EventTarget을 상속하고 있기 때문에 아래와 같이 이벤트 리스너를 등록할 수 있는 것이다.

document.querySelector('button').addEventListener('click', () => {});

 

이벤트 리스너에서 받는 Event 객체의 target 타입이 EventTarget인 이유는, 해당 메서드와 속성이 EventTarget에 정의되어 있기 때문이다.

 

 

또한 EventTarget은 DOM 전용이 아니기 때문에 Node.js 환경에서도 사용할 수 있다.

class Test extends EventTarget {
  something() {
    const event = new Event("something");
    this.dispatchEvent(event);
  }
}

const test = new Test();

test.addEventListener('something', () => {
  console.log("something");
});

test.something();

 

EventTarget은 DOM 객체와 비 DOM 객체 모두에서 이벤트 처리 기능을 제공하는 공통 기반이다.

 

 

🎭 Node

DOM 트리 구조를 구성하는 모든 요소의 가장 상위 클래스이다.

트리의 탐색과 수정 기능을 제공하며, 아래 메서드 외에도 다양한 기능을 가지고 있다.

• appendChild
• removeChild
• firstChild
• parentNode
• contains

 

Node에서 제공하는 탐색 기능은 부모, 자식, 형제 노드를 찾는 기능만 제공한다.

종류	프로퍼티	설명
부모	parentNode	부모 노드 탐색
자식	children / firstChild	자식 노드 탐색
형제	previousSibling / nextSibling	형제 노드 탐색

위 프로퍼티는 일부만 작성한 것이고, 추가적인 프로퍼티도 제공한다.

💡 Node는 EventTarget을 상속한다.

 

 

🛒 Element

Element는 Node를 상속하는 클래스로, 모든 XML/HTML 태그 요소를 표현하는 일반적인 클래스이다.
일반적으로 DOM을 탐색할 때 자주 사용되며, Node보다 탐색에 도움이 되는 추가 프로퍼티와 메서드를 제공한다.

 

• querySelector
• closest
• getElementById

Node가 DOM 트리의 논리적 구성 요소 역할만 한다면, Element는 화면에 어떻게 그려지는지를 포함한 시각적 정보를 가진다.

 

• clientWidth
• clientTop
• getBoundingClientRect

 

이 외에도 속성(attribute) 제어, classList 조작 등 다양한 기능을 제공한다.

💡 Element는 Node를 상속한다.

 

 

⚽ HTMLElement

Element는 HTML 요소뿐 아니라 XML 요소까지 포함하는 클래스이다.
HTML 요소는 HTMLElement로 표현된다.

 

HTMLElement에서도 크기와 좌표와 관련된 속성을 제공한다.

• offsetWidth
• offsetTop

Element에서는 clientWidth를, HTMLElement에서는 offsetWidth를 각각 제공한다.

이는 Element가 HTML 이외의 다양한 DOM 요소에서도 사용할 수 있는 크기 정보를 제공하기 위함이다.

 

clientWidth

• 콘텐츠 영역 + 패딩까지의 내부 영역 크기를 계산한다.
• border와 margin은 제외한다.

 

offsetWidth

 

• 콘텐츠 영역 + 패딩 + border + 스크롤바까지 포함한 시각적 너비를 계산한다.
• margin은 제외한다.

EventTarget
  └── Node
        ├── Document
        ├── Element
        │     ├── HTMLElement
        │     │     ├── HTMLDivElement
        │     │     ├── HTMLSpanElement
        │     │     └── ...
        │     └── SVGElement
        ├── Text
        └── ...

 

 

🎯 정리

• EventTarget : DOM 객체와 비 DOM 객체를 모두 포함해, 이벤트 발생 대상을 표현하는 기본 인터페이스이다.
• Node : DOM 트리의 논리적 구조를 구성하는 최상위 클래스이다.
• Element : 화면에 렌더링되는 모든 XML/HTML 태그 요소를 표현하는 기본 클래스이다.
• HTMLElement : Element 중 HTML 태그 요소를 표현하는 기본 클래스이다.