[자바스크립트] BOM / DOM

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

브라우저의 정보에 접근하거나 브라우저의 기능을 제어하기 위한 객체 모델 

문서 객체모델(DOM)과는 달리 표준 객체모델은 아님 (전역객체로 사용가능)

자바스크립트가 브라우저의 기능요소들을 직접 제어하고 관리할 수 있는 방법을 제공함

 

1) Window 객체 

웹 브라우저 창을 나타내는 객체 

DOM 요소들은 모두 Window 객체의 프로퍼티 (그중 document 객체 )

window 객체의 모든 메소드 / 프로퍼티를 사용할 때는 window라는 접두사 생략 가능

 

2) Screen 객체

사용자의 디스플레이 화면에 대해 다양한 정보를 저장 (브라우저 크기x) 

screen.width : 화면 너비를 px 단위로 반환 

screen.height : 화면높이를 px단위로 반환

 

3) Location 객체

현 브라우저에 표시된 HTML문서 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용 

location.href : 현 문서의 전체 url주소를 문자열로 반환 

location.host : 주소 (도메인) 

location.protocal : "https"를 사용해 정보들을 교환 (서버와 클라이언트 간의 통신교환 규칙) -s보안강화 

 

4) History 객체

브라우저의 히스토리 정보를 문서 /문서 상태 목록으로 저장하는 객체

history.length 히스토리 목록의 개수를 반환 

window.history.back/ forward(); 브라우저 뒤로가기 / 앞으로가기 버튼동작 

 

5) Navigator 객체

브라우저 공급자 버전 /정보를 포함한 브라우저에 대한 다양한 정보 제공

navigator.appVersion 현 브라우저 버전 

navigator.cookieEnabled 쿠키사용여부 

navigator.platform 현 운영체제 버전 

 

타이머

일정 시간이 지난 뒤에 함수를 호출하는 메소드

setTimeout() >  타이머가 만료되면 함수 or 지정 코드를 실행 clearTimeout() > 시간초과로 실행취소setInterval() > 함수를 반복적으로 호출 

---

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

BOM중에서 window의 document 객체 모델

XML이나 HTML문서에 접근하기 위한 일종의 인터페이스 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 법을 제공

 

※ Documnet 객체  : 웹 페이지 자체, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 땐, Document 객체 시작

 

※ Document 메소드 지정 방법 

 html요소의 선택  / 요소 생성 / 이벤트 핸들러 추가 / 객체 선택(각 태그 이름으로 지정)

 

Document 메소드 (요소 선택)

1) document.getElementsById(아이디)   해당 아이디의 요소를 선택 

2) document.getElementsByTagName(태그이름)

 해당 태그 이름의 요소 모두 선택 

3) document.getElementsByClassName(클래스이름)    해당 클래스에 속한 요소 모두 선택

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

 

   - CSS 선택자로 선택할 수 있음(body  .class-name  #id-name ( 속성이름 = 속성명)  

     띄어쓰는 경우, 자손선택자 붙여쓰는 경우 모두 다 선택할 수 있음 

5) document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택함.

6) document.querySelector(선택자)  : 하나만 선택할 때 주로 사용 (선택자 적용) 

7) document.forms 과 같은 HTML 객체 집합(object collection)*을 이용한 선택

→ HTML Collection : 요소문서 내 순서대로 정렬된 배열과 유사한 객체 /리스트에서 선택할 때 필요한 메서드 및 속성 제공

 

---