[기초] DOM & BOM 개념

DOM(Document Object Medel) 이란

웹 페이지에 대한 인터페이스로 웹 요소를 조작하기 위한 기능들의 모음이다.

브라우저에 따른 DOM의 차이

W3C에서 DOM의 정의한 규격에 따라 크롬(Chrome), 엣지(Edge), 파이어폭스(Firefox) 등과 같은 브라우저에 따라 DOM을 구성하는 방식이 다르다.

 

• W3C DOM: DOM에 대한 인터페이스를 정의한 IDL(Interface Definition Language)를 구성
• Browser DOM: 마이크로소프트, 구글 등에서 개발한 브라우저는 W3C DOM의 IDL에 따라 인터페이스 코드를 작성하여 자신들만의 DOM를 구성

DOM이 Web Browser에서 동작하는 과정(*상세 과정 생략)

웹 브라우저에서 DIV 객체(<div></div>)를 생성하는 단계

1. HTML/XML 코드를 웹 브라우저에 로드
2. 웹 브라우저 내에서 고유의 렌더링 엔진(크롬=웹킷, 케코=모질라)에 따라 코드를 파싱
3. DOM 클래스 객체 생성: 파싱 단계에서 <div>를 파싱 시 HTMLDivElement 인스턴스(객체)를 생성
4. DOM 트리 구축

*상세 과정은 "NAVER D2, 브라우저는 어떻게 동작하는가"를 참고

핵심 DOM 객체

DOM 객체는 Node 객체를 상속받아 사용하게 되며, 이를 도식화한 그림은 아래와 같다.

오픈튜토리얼 참고

• Node: 모든 하위 객체를 상속받는 객체의 기본 단위, 노드를 탐색하고 조작하고자 할 때 사용
• Document: 텍스트(Text), 엘리먼드(Element), 어트리뷰트(Attr) 노드를 구성하고자 할 때 사용, HTML과 XML 태그 노드를 조작(설정 및 이벤트 추가)하기 위한 속성과 메소드를 포함하고 있음
• Element: HTML, XML 태그 요소의 속성과 이벤트 제어에 사용
• HTMLDocument: Documnet 객체를 확장하여 HTML용 속성과 같은 메소드를 추가한 객체(Body는 이 객체에 포함됨)
• HTMLElement: Element 객체를 상속받은 HTML 태그 요소로 HTML 태그 요소의 기본 기능과 속성을 제공(id, className, style 등)
• Text: 텍스트를 다루는 기능
• Attribute: 속성을 다루는 기능

위와 같은 Node 객체를 상속받아 DOM을 구성한 구조는 아래와 같다.

 

Node 객체를 이용한 DOM 구성 예

 

---

BOM(Browser Object Medel) 이란

웹 브라우저 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공한다. BOM은 전역 객체인 Window의 Property와 Method을 통해서 제어할 수 있다. 

Window 객체를 상속받는 BOM

모든 객체는 Window의 자식이며 DOM과 달리 BOM은 공식적인 표준(DOM은 W3CDOM이 존재)이 없기 때문에 웹 브라우저마다 BOM API가 조금씩 다를 수 있다.

Window Method & property

• window.alert(): 알림창
• window.confirm(): 사용자의 선택에 따라 True, False 값 반환하는 알림창
• window.open(): 새창으로 오픈
• window.close(): 창 닫기
• window.setTimeout(): 시간 후에 1회 함수 실행
• window.setInterval(): 주기마다 함수 반복 실행
• window.localStorage(): 로컬스터리지 접근(브라우저내 로컬스토리지에 key, value 형태로 접근)

BOM

Navigator

Navigator 객체는 브라우저 정보를 담고 있으며, window.navigator에 읽기 속성으로 접근 가능하다.

• Navigator.connection: 네트워크 연결 정보를 담은 NetworkInformation 객체를 반환
• Navigator.cookie: 쿠키 접근 설정 및 접근 여부 확인
• Navigator.onLine: 브라우저가 온라인 상태임을 확인(인터넷 연결이 되어있지 않을 경우 False)
• Navigator.userAgent: 사용자의 브라우저 감지(브라우저 종류 리턴)

Location

Location 객체는 브라우저의 주소 정보(URL)를 담고 있으며, Document 객체와 Window 객체가 Location 인터페이스를 포함하여 Document.location, Window.location으로 접근할 수 있다. 

• Location.href: 온전한 URL을 값을 반환하며, Location.href의 값이 변경될 경우 연결된 웹 페이지도 새로운 페이지로 이동
• Location.protocol: URL의 Method(http, https)를 반환
• Location.host: URL의 호스트(포트번호 포함)를 반환(http://naver.com -> naver.com)
• Location.pathname: '/' 문자 뒤 URL 경로를 반환(https://developer.mozilla.org/ko/docs/ -> /ko/docs/)
• Location.search: '?' 문자 뒤 URL 값을 반환
• Location.hash: '#' 문자 뒤 URL 값을 반환​

Location의 Method

• Location.assign('[URL]"): URL 리소스를 로드(이전 페이지가 세션에 기록 = 본래 페이지 이동 가능)
• Location.reload(): 현재 URL의 리소스를 다시 로드
• Location.replace("[URL]"): URL 리소스로 변경(이전 페이지가 세션에 기록 X = 본레 페이지 이동 불가능)
• Location.toString(): 온전한 URL 값을 반환(Location.href와 유사하나 값 할당 불가능)

History

History 객체는 브라우저의 세션 기록(프레임의 방문 기록)을 조작할 수 있다.

• History.length: 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수 반환

History의 Method

• History.back(): 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메소드=History.go(-1) 
• History.forward(): 세션 기록의 바로 앞 페이지로 이동하는 비동기 메소드=Hisotry.go(1)
• History.go([Number]): 현재 페이지를 기준으로 상대 세션 기록으로 이동
• History.pushState([URL]): URL을 세션 기록 스택에 삽입
• History.replaceState([URL]): 세션 기록 스택의 제일 최근 항목을 URL로 변경

---

마치며

포스팅외 내용은 MDN 공식 웹사이트를 가면 찾아볼 수 있다.

---

Reference

[1] https://d2.naver.com/helloworld/59361

[2] https://opentutorials.org/module/904/6698

[3] https://velog.io/@tjdud0123/BOM-API

[4] https://developer.mozilla.org/ko/docs/Web/API/Navigator

[5] https://developer.mozilla.org/ko/docs/Web/API/Location

[6] https://developer.mozilla.org/ko/docs/Web/API/History