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 → 집 방문 내역
728x90
'개발자 성장 로드맵 > 프론트엔드' 카테고리의 다른 글
| NPM 기초 완전 정리 (2) | 2025.07.11 |
|---|---|
| 자바스크립트 모듈 시스템 완전 정리 (2) | 2025.07.11 |
| Front-End 개발 필수: 이벤트 버블링·캡처링, JS 모듈, 배열 메서드 총정리 (1) | 2025.07.11 |
| Front-End 필수 개념: script 로드 전략과 this 이해하기 (2) | 2025.07.10 |
| 프론트엔드 개발자 입문 로드맵 (2) | 2025.06.21 |