[CS] BOM과 DOM

1. BOM (Browser Object Model)

브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다.

이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다.

전역객체로 window가 있으며, 하위 객체들로 location, navigator, document, screen, history가 포함되어 있다.

 

2. DOM (Document Object Model)

웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다.

최상위 인터페이스로 Node가 있고, 아래 이미지와 같은 구조로 나타나게 된다.

출처: https://www.javascripttutorial.net/javascript-dom/document-object-model-in-javascript/

이 때, 단순한 엘리먼트 뿐만 아니라 텍스트나 주석 등도 DOM 트리에 포함되는 것을 알 수 있다.

DOM을 다루기 위해서는 getElementById, querySelector, firstElementChild 등과 같이 브라우저가 제공하는 DOM API를 사용하면 된다.

또, 노드 트리의 모든 노드는 서로 계층적 관계를 갖고 있는데, 이것을 표현하면 다음과 같다.

출처: https://www.javascripttutorial.net/javascript-dom/document-object-model-in-javascript/

 

 

 

참고

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bom-dom.md