728x90
반응형
1. DOM이란 무엇인가요?
- 우리가 웹사이트를 볼 때, 화면에 글자나 사진, 버튼들이 보이죠?
- 이 모든 것들은 HTML 코드로 작성되어 있어요.
하지만,
브라우저는 HTML을 그대로 보여주는 게 아니라,
HTML 코드를 읽어서 '나무 구조(트리 구조)'로 변환해요.
이 구조를 바로 DOM(Document Object Model) 이라고 부릅니다.
쉽게 말하면
"HTML을 브라우저가 이해할 수 있게 만든 나무 모양의 구조"
라고 생각하면 됩니다.
2. DOM은 어떻게 생겼나요?
- DOM은 트리 모양으로 생겼어요.
- HTML 안에 있는 모든 태그(html, head, body, div, h1, p 같은 것들)가
- 각각 DOM 안의 하나하나의 '객체(Object)' 가 됩니다.
예를 들어, 이런 HTML이 있다면:
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<div>
<h1>안녕하세요</h1>
</div>
</body>
</html>
DOM 트리는 이렇게 그릴 수 있어요:
html
├── head
│ └── title ("페이지 제목")
└── body
└── div
└── h1 ("안녕하세요")
정리
- 각각의 HTML 태그가 하나의 작은 박스(객체) 가 되어
- 전체 문서를 나무처럼 가지를 뻗으며 구성합니다.
3. DOM과 JavaScript는 어떻게 연결되나요?
- 브라우저는 HTML을 DOM으로 만들어 보여주기만 하는 게 아니라,DOM을 읽거나 바꾸거나 추가하거나 삭제할 수 있도록 해줍니다.
- JavaScript라는 프로그래밍 언어를 이용해서
예를 들어
- 버튼을 클릭했을 때 색깔이 바뀌는 것도
- 댓글을 입력했을 때 바로 화면에 추가되는 것도
- 알림 창이 뜨는 것도 모두 JavaScript가 DOM을 조작해서 만드는 것입니다.
4. 실제로 할 수 있는 일은 뭐가 있나요?
| 할 수 있는 일 | 설명 |
| 텍스트 변경 | 웹사이트에 보이는 글자를 JavaScript로 바꿀 수 있어요. |
| 요소 추가 | 새로운 글, 이미지, 버튼을 추가할 수 있어요. |
| 요소 삭제 | 필요 없는 글이나 버튼을 없앨 수 있어요. |
| 스타일 변경 | 글자 색깔, 크기, 배경 등을 바꿀 수 있어요. |
| 반응 만들기 | 마우스를 올리거나, 버튼을 누를 때 반응하게 만들 수 있어요. |
예시들
- 디지털 시계처럼 초 단위로 숫자가 바뀌게 하기
- 로그인 버튼을 클릭하면 버튼을 잠그기
- 할 일 목록에서 항목을 클릭하면 삭제하기
- 페이지가 열릴 때 애니메이션처럼 부드럽게 내용 나타나게 하기
5. DOM은 왜 중요한가요?
- 과거에는 웹사이트가 단순히 글을 읽는 공간이었어요.
- 요즘은 웹사이트가 앱처럼 동작합니다. (예: 소셜 미디어, 쇼핑몰, 스트리밍 사이트)
이런 풍부하고 생동감 있는 기능들을 만들려면,
HTML만으로는 부족하고,
JavaScript + DOM 조작이 꼭 필요합니다.
쉽게 말해, 웹사이트를 살아 움직이게 하려면 DOM을 다룰 수 있어야 합니다.
최종 요약
- DOM은 HTML 문서를 트리 구조로 변환한 것이다.
- JavaScript를 이용해 DOM을 읽고, 수정하고, 추가하고, 삭제할 수 있다.
- DOM을 잘 다루면 웹사이트를 더 빠르고, 편리하고, 생동감 있게 만들 수 있다.
728x90
반응형
'front-end development' 카테고리의 다른 글
| [지식루프 웹개발공부] 07. API 와 서비스 (3) | 2025.04.26 |
|---|---|
| [지식루프 웹개발공부] 06. 프레임워크와 라이브러리 차이 (1) | 2025.04.25 |
| [지식루프 웹개발공부] 05. 웹 브라우저 작동원리 (0) | 2025.04.22 |
| [지식루프 웹개발공부] 04. 웹사이트와 웹페이지 (2) | 2025.04.22 |
| [지식루프 웹개발공부] 03. 웹 서버란 무엇이며 어떻게 작동하나요? (0) | 2025.04.22 |