웹 페이지를 살아 움직이게 만드는 핵심 기술, DOM(Document Object Model)
HTML은 웹 페이지의 뼈대(Structure)를 만들고, CSS는 디자인(Style)을 담당합니다. 하지만 웹 페이지를 동적으로 변화시키고 사용자와 상호작용하게 만드는 것은 바로 JavaScript와 DOM입니다.
DOM(Document Object Model)은 HTML 문서를 트리(Tree) 형태의 객체(Object)로 변환하여, JavaScript가 각 요소를 자유롭게 조회하고 수정하며 삭제할 수 있도록 해주는 인터페이스입니다.
DOM은 트리(Tree) 구조로 구성됩니다.
웹 브라우저는 HTML 문서를 읽으면 다음과 같은 트리 구조를 생성합니다.
document
└── html
├── head
│ └── title
└── body
├── h1
├── p
├── div
│ ├── a
│ └── img
└── ...
각 HTML 태그는 Node(노드)가 되며, 부모와 자식 관계를 가지는 계층 구조를 형성합니다.
DOM이 중요한 이유
DOM 덕분에 JavaScript는 웹 페이지를 실시간으로 제어할 수 있습니다.
HTML 요소를 선택하고 제어
document.querySelector("h1");
텍스트와 내용을 동적으로 변경
element.textContent = "안녕하세요!";
HTML 속성(Attribute) 수정
image.src = "photo.jpg";
새로운 HTML 요소 생성
document.createElement("div");
기존 요소 삭제
element.remove();
버튼 클릭, 입력, 스크롤 등 다양한 이벤트 처리
button.addEventListener("click", function(){
alert("클릭!");
});
이러한 기능 덕분에 현대적인 웹 애플리케이션(SPA)과 인터랙티브한 사용자 경험(UX)이 가능해집니다.
DOM의 주요 Node(노드) 종류
Document Node
HTML 문서 전체를 대표하는 최상위 노드입니다.
Element Node
<div>, <p>, <h1> 등 모든 HTML 태그를 의미합니다.
Text Node
HTML 태그 안에 포함된 실제 텍스트 데이터를 저장합니다.
예)
<h1>Welcome</h1>
“Welcome”이 Text Node입니다.
Attribute Node
HTML 요소의 속성 정보를 저장합니다.
예)
<img src="photo.jpg">
src가 Attribute Node입니다.
Comment Node
<!-- 설명 -->
HTML 주석도 하나의 노드입니다.
HTML · CSS · JavaScript의 역할
HTML
웹 페이지의 구조(Structure)를 정의합니다.
CSS
색상, 글꼴, 레이아웃 등 디자인(Style)을 담당합니다.
JavaScript + DOM
DOM을 통해 HTML 요소를 제어하여 동적인 기능(Interaction)을 구현합니다.
DOM 활용 예제
텍스트 변경
document.querySelector("h1").textContent = "Hello DOM";
속성 변경
document.querySelector("img").src = "new.png";
새 요소 추가
const p = document.createElement("p");
p.textContent = "새로운 문장";
document.body.appendChild(p);
DOM을 이해하면 가능한 것
로그인 화면 만들기
게시판 작성 및 수정
메뉴 열기/닫기
다크모드 구현
슬라이드 배너
쇼핑몰 장바구니
실시간 채팅
SPA(React, Vue, Angular)의 핵심 원리 이해
DOM은 모든 프론트엔드 프레임워크의 기반 기술입니다.
핵심 정리
HTML은 웹 페이지의 뼈대를 만들고, CSS는 디자인을 입히며, JavaScript는 DOM을 통해 웹 페이지를 살아 움직이게 만듭니다.
DOM을 이해하면 단순한 정적 웹페이지를 넘어 사용자와 상호작용하는 동적인 웹 애플리케이션을 개발할 수 있습니다.
프론트엔드 개발자의 첫 번째 필수 개념이 바로 DOM입니다.
#️⃣ #HTML #DOM #JavaScript #Frontend #WebDevelopment #FrontendDeveloper #HTML5 #CSS #CSS3 #WebDeveloper #Programming #Coding #Developer #WebDesign #React #Vue #Angular #FrontendEngineering #DOMTree #ISCCERT
— 이춘곤(Mark) · ISC.studio · ISC출판 도서 안내
이 글은 저자의 Facebook에 처음 게시한 글입니다. Facebook 원문 보기
💬 댓글 (0)