BOM 과 DOM

---

BOM (Brower Object Model - 브라우저 객체 모델)

웹 브라우저에서 제공되는 객체 모델을 나타낸다. 웹 페이지를 조작하고 제어하기 위해 사용되며, 브라우저 창, 히스토리, 위치 등과 같은 브라우저 관련 객체를 포함한다. 

 

BOM의 주요 구성요소

1. Window 객체:
   • Window 객체는 웹 브라우저 창을 나타낸다. 모든 JavaScript 코드는 기본적으로 Window 객체 내에서 실행된다. 이 객체를 사용하여 브라우저 창의 크기를 조정하거나 새로운 창을 열거나 닫는 등의 작업을 수행할 수 있다.
2. Document 객체:
   • Document 객체는 현재 표시된 웹 페이지(Document)의 내용을 나타낸다. DOM(Document Object Model) 트리 구조를 통해 웹 페이지의 모든 요소에 접근하고 조작할 수 있다.
3. History 객체:
   • History 객체는 브라우저의 탐색 히스토리 정보를 제공한다. 뒤로 가기, 앞으로 가기 등과 같은 사용자의 탐색 동작을 제어하고 탐색 히스토리를 조작할 수 있다.
4. Location 객체:
   • Location 객체는 현재 웹 페이지의 URL 정보를 제공한다. 이 객체를 사용하여 웹 페이지의 URL을 변경하거나 파싱할 수 있다.
5. Navigator 객체:
   • Navigator 객체는 웹 브라우저와 관련된 정보를 제공한다. 사용자 에이전트(User Agent) 정보, 브라우저 버전, 플러그인 지원 여부 등을 확인할 수 있다.

 

BOM은 웹페이지의 브라우저와 상호작용하기 위한 다양한 기능을 제공한다. 

 

이러한 기능들을 이용해 다음과 같은 작업을 수행할 수 있다.

 

1. 브라우저 창 관리: 새 창 또는 팝업 창 열기, 창의 크기 및 위치 조정, 창 닫기 등의 작업을 수행한다.
2. 탐색 제어: 뒤로 가기, 앞으로 가기, 히스토리 조작을 통해 사용자의 탐색 흐름을 제어한다.
3. 쿠키 및 세션 관리: 쿠키 설정 및 삭제, 세션 관리를 통해 사용자 정보를 저장하고 유지한다.
4. 브라우저 정보 확인: 브라우저 종류, 버전, 특성, 지원 기능을 확인하여 웹 페이지를 최적화한다.
5. 시간 및 타이머 제어: 특정 시간에 코드 실행 또는 일정 간격마다 반복 코드 실행을 관리한다.

JavaScript를 사용하여 BOM 객체를 활용하면 사용자와 브라우저간의 상호작용을 다양하게 제어하고 컨트롤 할 수 있다.

 

 

 

 

DOM (Document Object Model - 문서 객체 모델)

웹 페이지의 구조와 콘텐츠를 프로그래밍적으로 접근하고 조작하기 위한 표준화 된 인터페이스를 제공하는 웹 기술이다.

 

HTML, XML, XHTML과 같은 문서의 요소를 트리 구조로 표현하며, JavaScript 와 같은 스크립트 언어를 사용하여 웹 페이지의 내용을 동적으로 조작할 수 있도록 한다. 

 

1. 문서 구조 표현:
   • DOM은 웹 페이지를 트리 구조로 표현한다. 이 구조는 노드(Node)로 구성되며, 노드 간의 부모-자식 관계로 웹 페이지의 계층적 구조를 반영한다.
2. 요소(Element):
   • DOM에서 각 HTML 요소는 요소 노드로 표현된다. 예를 들어, <div>, <p>, **<a>**와 같은 HTML 요소들은 DOM에서 각각의 요소 노드로 나타난다.
3. 속성(Attribute):
   • HTML 요소의 속성들도 DOM에서 노드로 표현된다. 예를 들어, <img> 요소의 "src" 속성은 해당 요소 노드의 속성 노드로 나타난다.
4. 텍스트 노드(Text Node):
   • 웹 페이지의 텍스트 내용은 텍스트 노드로 표현된다. HTML 문서 내의 모든 텍스트는 DOM의 텍스트 노드로 포함된다.
5. DOM API (Application Programming Interface):
   • DOM은 브라우저에서 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소와 속성에 접근하고 조작할 수 있도록 다양한 메서드와 속성을 제공한다. 이를 통해 웹 개발자는 웹 페이지의 내용을 동적으로 수정하거나 사용자와 상호작용할 수 있다.
6. 이벤트 처리:
   • DOM을 사용하여 웹 페이지에서 발생하는 이벤트(클릭, 입력, 마우스 이동 등)를 감지하고 처리할 수 있다. 이를 통해 사용자와 웹 페이지 간의 상호작용을 제어할 수 있다.
7. 동적 변경:
   • JavaScript를 사용하여 DOM을 조작하면 웹 페이지를 동적으로 변경할 수 있다. 요소 추가, 삭제, 수정, 숨김/표시, 애니메이션 등을 구현할 수 있다.

 

DOM은 웹 애플리케이션 개발에서 중요한 역할을 하며, 웹 페이지의 구조와 내용을 프로그래밍적으로 제어하기 위한 핵심 도구이며 이를 통해 사용자 경험을 향상시키고 상호작용성있는 웹 애플리케이션을 구축할 수 있다.