초보자를 위한 JavaScript DOM 설명

Source: Dev.to

DOM이란?

DOM은 Document Object Model의 약자입니다.
HTML 문서를 트리‑구조로 표현한 것으로, JavaScript가:

• 읽을 수 있고
• 변경할 수 있으며
• 추가할 수 있고
• 제거할 수 있습니다

쉽게 말해, DOM은 JavaScript가 HTML 요소를 제어하고 조작할 수 있게 합니다.

예시를 통한 DOM 이해

다음 HTML을 보세요:

## Hello

Click Me

브라우저가 이 페이지를 로드하면, 다음과 같은 DOM 트리로 변환합니다:

Document
 └── html
     └── body
         ├── h1
         └── button

JavaScript는 원시 HTML이 아니라 이 DOM 트리와 상호작용합니다.

DOM이 중요한 이유

DOM이 없을 때

• 웹사이트가 정적임
• 상호작용이 없음
• 동적 업데이트가 없음

DOM이 있을 때

• 버튼이 클릭에 반응함
• 폼이 검증됨
• 페이지를 새로 고치지 않아도 내용이 업데이트됨

모든 최신 웹사이트는 DOM을 사용합니다.

DOM 작동 방식

흐름은 간단합니다:

HTML → DOM Tree → JavaScript Controls DOM

JavaScript는 다음을 할 수 있습니다:

• 요소 선택
• 텍스트나 스타일 변경
• 요소 추가 또는 제거
• 이벤트 감지(클릭, 입력, 제출)

알아두면 좋은 일반적인 DOM 메서드

요소 선택

document.getElementById("title");
document.querySelector(".box");

내용 변경

document.getElementById("title").innerText = "Welcome to DOM";

스타일 변경

document.getElementById("title").style.color = "blue";

이벤트 처리

button.addEventListener("click", () => {
  alert("Button clicked!");
});

클래스 작업

element.classList.add("active");
element.classList.remove("active");

DOM의 실제 활용 사례

• 폼 검증
• 토글 버튼(예: 다크 모드)
• 모달 및 드롭다운
• 동적 콘텐츠 로딩
• 싱글 페이지 애플리케이션

React와 기타 프레임워크도 DOM 개념(가상 DOM)을 기반으로 구축됩니다.

DOM을 배운 뒤 다음에 배울 내용

• DOM 이벤트(클릭, 입력, 제출)
• ES6 JavaScript
• 비동기 JavaScript(프라미스, Fetch API)
• React.js