DOM + BOM 구조 설명

프로잉2 2025. 7. 10. 18:53

2025. 7. 10. 18:53

728x90

🌳 DOM Tree (Document Object Model)

DOM은 웹 문서를 트리(Tree) 형태로 표현한 구조야. **HTML 문서 안의 모든 요소(태그, 텍스트, 속성)**를 객체처럼 다룰 수 있게 해주지.

DOM Tree 예시 다이어그램

HTML 예시

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </body>
</html>

나무 모양 다이어그램:

DOM 이해 비유

document → 전체 나무
html → 큰 가지
head, body → html 아래 두 갈래 큰 가지
태그들 → 잎사귀
텍스트 → 잎사귀에 적힌 글자

🌐 BOM (Browser Object Model)

DOM은 “문서”를 다루고, BOM은 브라우저 자체를 다루는 개념이야.

BOM은 DOM보다 더 “바깥쪽”에 있음
웹 페이지가 아닌, 브라우저 환경 자체를 다루는 객체들이 BOM에 포함됨
대표적인 BOM 객체:
- window
- navigator
- screen
- history
- location

✅ 주요 BOM 객체 설명

1. window

최상위 객체 (DOM, BOM 둘 다 포함)
비유: 브라우저 창 전체
예시:

window.alert("Hello!");
console.log(window.innerWidth);

2. document

DOM의 진입점
HTML 문서를 표현
예시:

document.getElementById("title");

3. navigator

브라우저 정보
예시:

console.log(navigator.userAgent);
console.log(navigator.language);

4. screen

사용자 화면 해상도 정보
예시:

console.log(screen.width);
console.log(screen.height);

5. location

현재 URL 정보 + 이동 기능
예시:

console.log(location.href);
location.href = "https://www.google.com";

6. history

사용자가 방문한 페이지 이력
예시:

history.back();
history.forward();

✅ DOM vs BOM

구분DOMBOM

역할	문서(HTML)를 객체로 표현	브라우저 환경 자체를 다룸
최상위 객체	document	window
예시	document.getElementById	window.alert, location.href

✅ 비유로 정리

DOM → 웹페이지의 설계도
BOM → 브라우저라는 집 전체의 컨트롤러
window → 집 전체
document → 집 안의 설계도
navigator → 집의 신분증
screen → 집의 창문 크기
location → 집 주소
history → 집 방문 내역