오늘은 인프런 강의를 참고해 프론트엔드를 공부할 때 꼭 알아두면 좋은 기본 개념들을 정리해보려 합니다.
처음 배우는 분들도 이해하기 쉽게, 핵심 위주로 설명해볼게요.
DOM이란? (Document Object Model)
DOM은 웹 문서를 객체처럼 다룰 수 있게 만든 구조입니다.
HTML 문서는 브라우저가 읽을 수 있는 형태로 파싱되며, 이때 트리(Tree) 구조를 가지게 되는데 이 구조가 바로 DOM입니다.
- DOM = HTML 문서를 트리 형태로 표현한 객체 모델
- 자바스크립트는 이 DOM을 통해 HTML 요소를 추가, 수정, 삭제할 수 있습니다
- DOM의 루트는 document이며, 이를 통해 웹페이지 내부로 접근합니다
예시
document.getElementById("title").innerText = "안녕하세요";이런 코드가 가능한 이유는 DOM이 웹페이지를 객체로 표현해주기 때문입니다.
BOM이란? (Browser Object Model)
BOM은 브라우저 자체를 객체로 표현한 모델입니다.
DOM이 웹 문서 자체를 조작하는 것이라면, BOM은 브라우저를 제어하기 위한 API입니다.
자바스크립트는 BOM을 통해 브라우저 기능을 조작할 수 있습니다.
주요 BOM 객체
| 객체 | 설명 |
| window | 모든 객체가 소속된 최상위 객체. 브라우저 창 자체 |
| document | 현재 문서에 대한 정보와 구조를 가진 객체 (DOM 트리의 루트) |
| history | 사용자가 방문한 페이지 기록 제어 가능 |
| location | 현재 문서의 URL 정보와 관련된 기능 제공 |
| screen | 사용자의 디스플레이 정보 제공 (해상도 등) |
| navigator | 브라우저와 사용자 환경에 대한 정보 제공 |
navigator 객체 예시
navigator 객체는 사용자 브라우저 정보, 위치 정보 등을 제공하여
크로스 브라우징 대응이나 사용자 환경에 맞춘 처리가 가능합니다.
- navigator.geolocation.getCurrentPosition() → 현재 위치 정보 가져오기
- navigator.appName → 브라우저 이름
- navigator.appVersion → 브라우저 버전 정보
- navigator.userAgent → 서버 요청 시 사용되는 브라우저 정보 문자열
정리
- DOM: 웹 페이지의 구조를 트리 형태로 표현한 것. 문서 조작에 사용됨
- BOM: 브라우저 자체를 제어하기 위한 객체 집합. 자바스크립트가 브라우저 기능을 조작할 수 있게 해줌
- 자바스크립트는 DOM과 BOM을 통해 웹페이지와 브라우저를 제어할 수 있음