DOM과 인터페이스

OlMinJe·2025년 8월 5일

JavaScript

Web FrontEnd Study

목록 보기

44/44

DOM과 인터페이스: 브라우저와JS의 연결고리

✅ DOM이란?

DOM(Document Object Model)은 HTML 문서를 객체로 표현한 구조다.
쉽게 말하면, HTML 코드가 브라우저 안에서 자바스크립트가 조작할 수 있는 형태의 객체로 바뀐 것!

<body>
  <p>Hello</p>
</body>

이 코드는 브라우저 안에서 아래의 트리 구조의 객체로 표현된다.

document
 └── body
      └── p
          └── "Hello"

이렇게 HTML을 객체처럼 다룰 수 있게 해주는 것이 바로 DOM이다.

DOM은 브라우저가 제공하는 인터페이스
자바스크립트는 이 DOM 인터페이스를 통해 HTML 요소를 조작할 수 있게 된다.

❓인터페이스가 뭘까?

인터페이스(interface)는 어떤 객체가 따라야 할 규칙이나 룰이다.

마치 "이런 버튼을 만들면 클릭할 수 있고, 이름도 있고, 이렇게 동작해야 해!" 라는 사용 설명서 같은 것..?

예를 들어, button이라는 HTML 태그는 브라우저 안에서 HTMLButtonElement라는 인터페이스를 따르기 때문에,button 태그는 아래 코드와 같은 기능을 가질 수 있다.

const btn = document.querySelector('button');
btn.disabled = true; // 버튼 비활성화
btn.innerText = '확인'; // 버튼 텍스트 변경
btn.click(); // 버튼 클릭 동작 실행

이 모든 기능은 HTMLButtonElement라는 인터페이스에 정의되어 있기 때문에 사용할 수 있다.

✅ DOM 인터페이스란?

DOM 인터페이스는 자바스크립트가 HTML 요소를 객체처럼 다룰 수 있도록 메서드와 속성을 정의한 구조이다.

예를 들어, Document, Element, HTMLElement 등은 모두 DOM 인터페이스이다.
이 인터페이스들은 자바스크립트 객체처럼 사용할 수 있도록 메서드와 속성을 제공한다.

console.log(document instanceof Document); // true
console.log(document.body instanceof HTMLElement); // true

이처럼 document, div, input 등은 단순한 자바스크립트 객체가 아니라 인터페이스 기반의 객체 구조를 가지고 있다.

✅ JS에서 인터페이스란?

자바스크립트는 타입스크립트처럼 명시적인 interface 키워드는 없지만, 브라우저나 표준 라이브러리에서 제공하는 객체들은 공식적으로 정의된 속성과 메서드를 따르는 일종의 인터페이스로 볼 수 있다.
즉, DOM 객체들은 특정한 메서드 체계를 따르고 있으며, 이. 구조가 바로 "인터페이스"이다

HTMLInputElement, HTMLImageElement, HTMLDivElement 등은 각각의 태그와 매칭되는 세부 인터페이스

참고 사이트

👉 즉, HTML 요소들은 각기 다른 인터페이스를 상속받아 작동하고, 이 구조 덕분에 우리는 코드에서 일관되게 DOM을 조작할 수 있는 것!

✅ DOM 객체의 계층 구조

DOM 객체들은 서로 상속 관계로 연결되어 있다.

Node
 ├── Document
 │    └── HTMLDocument
 └── Element
      └── HTMLElement
           ├── HTMLInputElement
           ├── HTMLDivElement
           └── ...

모든 요소는 Node와 EventTarget을 상속하며, 이 구조 덕분에 이벤트 리스너 등록이나 노드 조작을 공통적으로 수행할 수 있다.

객체	의미
`Document`	전체 HTML 문서
`Element`	HTML 요소 개별 객체

DOM에서 요소에 접근하려면 여러 메서드를 활용한다.

✅ DOM 접근 메서드 정리

메서드	설명
`getElementById(id)`	ID로 요소를 가져옴
`getElementsByClassName(class)`	클래스로 요소들을 가져옴
`querySelector(selector)`	CSS 선택자로 첫 요소 선택
`querySelectorAll(selector)`	CSS 선택자로 모든 요소 선택(NodeList)

이 외에도 getElementsByTagName, getElementsByName 등 다양한 방식이 존재한다.