DOM, BOM

<BOM, DOM 구조> 이미지 출처: https://www.splessons.com/lesson/javascript-bom/

---

BOM(Browser Object Model)

 

 브라우저 객체 모델(BOM)은 자바스크립트가 웹브라우저와 소통하기 위해서 만들어진 모델이다.

웹브라우저의 창, 프레임 등을 추상화해 프로그래밍으로 제어할 수 있도록 제공하는 수단으로 전역객체인

Windows객체의 프로퍼티, 메소드들을 이용해 제어를 하게된다.

 

• window : 메인 브라우저 윈도우

• window.navigator : 브라우저에 대한 정보(버전정보 etc)

• window.screen : 사용자 화면

• window.history : 현재 url

• window.frames : 브라우저 윈도우를 차지하고 있는 프레임들

• window.document : 메인 브라우저에 표시된 HTML 문서

 

 

## 자주 사용할 수 있는 객체들 ##

 

 

1. 커뮤니케이션

 

alert() : 대화상자(경고 메세지)

confirm() : 대화상자(확인 선택시 true, 취소 선택시 false를 반환)

prompt() : 대화상자(사용자가 입력한 문자열을 반환)

 

 

2. 창 제어

 

close() : 창 닫기

open(url, name, spacs, replace) : 새로운 창 생성

 

 - url : 새 창에 보여질 주소로 비워두면 빈창(about:blank)

 - name : 새 창의 이름, 기본값은 '_blank' (_blank, _parent, _self, _top, name)

 - specs : 창의 모양과 관련된 속성 지정 (width, height 등등......)

 - replace : 새 창에 히스토리 목록을 넘겨줄지 여부 (true, false)

 

 

3. location 객체

 

location.toString(), location : 현재의 URL을 반환

location.href = 'url' : 입력한 url로 페이지 이동

location.replace('url') : 입력한 url로 페이지 이동

location.reload() : 현재 페이지 새로고침

location.protocol, location.host, location.port, location.pathname, location.search, location.hash : 문서의 위치 정보

 

 

4. history 객체

 

history.forward() : 다음 페이지로 이동

history.back() : 이전 페이지로 이동

history.go(num) : 지정된 단계의 페이지로 이동

 

 

5. navigator 객체

 

navigator.appName : 브라우저의 이름. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시

navigator.appVersion : 브라우저의 버전

navigator.userAgent : 브라우저가 서버측으로 전송하는 user-agent-http 헤더의 내용

navigator.platform : 브라우저가 동작하고있는 운영체제에 대한 정보

 

 

---

DOM(Document Object Model)

 

 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

브라우저가 웹페이지를 내부적으로 표현하는 모델로 프로그래밍 언어가 문서 내의 각각 요소에 접근하는 방법을 제공해

문서의 구조, 스타일, 내용 등을 변경할 수 있도록 도움을 준다. (body안의 내용들을 제어하는 역할)

 

DOM은 프로그래밍 언어와 독립적으로 디자인되었기 때문에 꼭 자바스크립트가 아니더라도 DOM의 구현이 가능하다.

 

※ DOM 은 브라우저환경에 따라 다르게 동작할 수 있기 때문에 주의해야할 필요성이 있다.

 

@관련 정보

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C#What_is_the_DOM

 

 

1. 문서 객체 선택

 

document.getElementById("id") : 해당 아이디의 요소를 선택

document.getElementsByClassName("className") : 해당 클래스에 속한 요소를 모두 선택

document.getElementsByName("name") : 해당 name 속성값을 가지는 요소를 모두 선택

document.getElementsByTagName("tagName") : 해당 태그를 모두 선택