[JavaScript] DOM / BOM

JavaScript & jQuery

Jane Kwon 2021. 2. 10. 14:27

DOM (Document Object Model)

- 문서에 대한 모든 내용을 담고있는 객체로, 문서 즉 열려진 페이지에 대한 정보를 따로 객체화하여 관리

예를 들어 아래와 같은 태그가 있다면

<div id="here">This element is div</div>

아래와 같이 ID 로 접근 가능하도록 해주는 역할이 DOM

document.getElementById('here').innerHTML = 'I want change this HTML';

DOM 은 Document 즉, 현재 문서에 대한 변형과 제어를 담당했다면,
BOM 은 Window 프로퍼티에 속해서 document 변형이 아닌 window 를 제어한다.

BOM (Browser Object Model)

- 브라우저에 대한 모든 내용을 담고있는 객체로,
브라우저가 가지고 있는 정보를 따로 객체화하여 관리 (ex: 뒤로가기, 히스토리, URL 정보 등)

예를 들어 alert, window.location, window.open, window.close 같은 기능들

// 뒤로가기
history.back();
// 현재 페이지 URL 전환
location.href = "www.google.com";