728x90
BOM (Browser Object Model)
브라우저에서 웹 페이지와 관련된 객체들을 조작하고 제어하는데 사용되는 객체모델.
주요 사용법
- 열려있는 창의 URL 얻어오기
- 브라우저의 정보를 받아올 수 있는 기능
- 도큐먼트 제어 대신 브라우저를 제어한다
주요 객체
- window 객체 : 브라우저 창 객체. 브라우저의 창 크기 조작, 새창 열기, url 변경가능
- location 객체 : 현제 페이지 url을 다루는 객체, 페이지의 url 변경 및 분석에 사용
- screen 객체 : 사용자 환경의 디스플레이(해상도, 색상) 관련 정보 접근
- navigator 객체 : 브라우저와 사용자의 시스템 정보에 접근 가능 (브라우저 정보, 버전, 플렛폼 등의 정보 확인)
- history 객체 : 브라우저 창의 페이지 이동 히스토리 관리(페이지 URL 변경, 분석하는데 사용)
대표적인 사용 예시 : 쿠키 관리, 타이머 설정, 사용자 인터페이스 제어 등
DOM (Document Object Model)
웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체 모델
웹페이지의 모든 요소를 계층적인 트리 구조로 나타내며 각요소는 객체로 표현해
Javascript 같은 스크립트 언어를 사용해 조작 가능하다.
특징
- 트리구조
- 요소들을 계층적 트리구조로 표현
- 최상단에 <html>, 하위에는 <head>, <body> 등
- 각 요소는 자식 요소들과 연결됨
- 객체 모델
- 속성과 컨탠츠를 포함한 HTML이나 XML 요소들 객체로 표현한다.
- Javascript로 객체에 접근하고 조작 가능하다.
- 요소 접근 및 조작
- Javascript를 이용해 DOM 객체에 접근하고 변경이 가능하다.
- 특정 요소를 선택, 속성 수정, 새로운 요소 추가/삭제 등의 작업 가능하다
728x90
'FE 이모저모 공부' 카테고리의 다른 글
| 모듈 번들러와 트랜스파일러 (0) | 2023.09.07 |
|---|---|
| 모듈 시스템 : CommonJS, AMD, UMD, ES6 (0) | 2023.08.26 |
| 브라우저의 렌더링 원리 + Virtual DOM의 등장 (0) | 2023.08.15 |
| Javascript 엔진이 코드를 실행하는 과정 (0) | 2023.08.14 |
| CSR(Client Side Rendering)과 SSR(Server Side Rendering) (0) | 2023.08.07 |
