브라우저 객체 모델(BOM)
1) BOM(Browser Object Model)
-
웹 브라우저와 관련된 객체의 집합
-
객체 모델 종류: window(최상위), location, navigator, history, screen, document
-
DOM(Document Object Model) 으로 통합해서 칭하기도 함
-
정확히는 자바스크립트가 아닌 웹브라우저가 제공하는 기능
2) window 객체
-
다른 BOM 객체의 상위 개념
-
alert(), prompt() 등 많은 메소드를 가지고 있음
-
var 키워드로 선언한 일반 변수도 window 객체의 속성이 됨
-
window 객체 생성 메소드: open(URL, name, features, replaced)
*객체 생성시 생성한 객체를 반환하기 때문에 변수에 입력해서 자유롭게 수정 가능
ex. var newWin = window.open();
newWin.document. // 좌측의 형태로 객체 사용 가능
- 매개변수
URL : HTML 페이지 URL
name : 윈도우 간 통신에 사용하는 이름
features : 윈도우 형태 옵션
replaced : 히스토리 리스트 옵션
- 윈도우 객체 생성 예시
window.open('https://www.google.com', 'child', 'width=500', 'height=300', true);
- 윈도우 형태 옵션
height : 새 윈도우의 높이
width : 새 윈도우의 너비
location : 주소 입력창 유무
menubar : 메뉴 유무
resizable : 화면 크기 조절 가능 여부
status : 상태 표시줄 유무
toolbar : 툴바 유무
left: 왼쪽 기준 팝업 위치 지정
top: 상단 기준 팝업 위치 지정
scrollbars: 스크롤바 유무
fullscreen: 풀스크린 출력
channelmode: 채널모드 출력
*픽셀값 혹은 yes, no, 1, 0으로 값 입력 가능
- window 객체의 기본 메소드
moveBy(x, y) : 윈도우의 위치를 상대적으로 이동
moveTo(x, y) : 윈도우의 위치를 절대적으로 이동
resizeBy(x, y) : 윈도우의 크기를 상대적으로 지정
resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정
scrollBy(x, y) : 윈도우 스크롤의 위치를 상대적으로 이동
scrollTo(x, y) : 윈도우 스크롤의 위치를 절대적으로 이동
focus() : 윈도우에 초점 맞춤
blur() : 윈도우에 맞춘 초점 제거
close() : 윈도우 닫음
-
window.onload : 윈도우 객체 로드 완료시 실행되는 객체
-
사용 예시
window.onload = function () {};
3) screen 객체
-
웹브라우저 화면이 아닌 운영체제 화면의 속성을 갖는 객체
-
screen 객체의 속성
width : 화면의 너비
height : 화면의 높이
availWidth : 실제 화면에서 사용 가능한 너비
availHeight : 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수
4) location 객체 - 주소창 뜻
-
웹브라우저의 주소 표시줄과 관련된 객체
-
location 객체는 프로토콜의 종류, 호스트 명, 문서 위치 등의 정보가 있음
-
location 객체의 속성
href : 문서의 URL 주소
host : 호스트 이름과 포트번호 // localhost:30763
hostname : 호스트 이름 // localhost
port : 포트 번호 // 30763
pathname : 디렉토리 경로 // /a/index.html
hash : 앵커 이름(#~) // #beta
search : 요청 매개변수 // ?param=10
protocol : 프로토콜 종류 // http:
- location 객체의 메소드
assign(link) : 현재 위치를 이동
reload() : 새로고침
replace(link) : 현재 위치를 이동(뒤로가기 사용 불가)
5) navigator 객체
-
웹페이지를 실행 중인 브라우저에 대한 정보가 담긴 객체
-
navigator 객체의 속성
appCodeName : 브라우저의 코드 이름
appName : 브라우저의 이름
appVersion : 브라우저의 버전
platform : 사용 중인 운영체제의 시스템 환경
userAgent : 웹 브라우저 전체 정보
13. 문서 객체 모델(DOM)
1) DOM(Document Object Model)
-
넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식
-
좁은 의미로는 document 객체와 관련된 객체의 집합
-
HTML 페이지는 트리 모양으로 구성, 각 요소를 노드라고 칭함
element node: html 태그 의미
text node: element node 안에 들어있는 텍스트
- 자바스크립트에서는 속성도 하나의 노드로 구분
2) document 객체 다루기
-
document 객체는 텍스트 노드를 가진 객체와 텍스트 노드가 없는 객체로 분류
-
document 객체의 노드 생성 메소드
createElement(tagName) : 요소 노드 생성
createTextNode(text) : 텍스트 노드 생성
- document 객체의 연결 메소드
appendChild(node) : 객체의 노드 연결
- document 객체의 속성 지정 방법
document 객체 노드 참조변수.속성 = 값;
- document 객체 생성 및 속성 지정 예시
var img=document.createElement('img');
img.src='1.jpg';
img.width=500;
- document 객체의 속성 관련 메소드
setAttribute(name, value) : 객체의 속성 지정
getAttribute(name) : 객체의 속성 반환
3) 쉽게 document 객체 생성
- 쉽게 document 객체를 생성하기 위해 innerHTML 속성을 사용
- 생성 양식
대상노드.innerHTML = 텍스트노드;
*대입시 기존 텍스트 노드는 전부 사라짐
- document 객체에 텍스트 노드 추가하는 방법
대상노드.innerHTML += 텍스트노드;
-
innerHTML 대신 textContent를 이용하면 태그 그대로 출력 가능
-
단 보안성이 취약하다는 단점이 존재
4) 문서 객체 참조
-
웹페이지에 이미 존재하는 HTML 태그를 자바스크립트에서 참조하는 방법
-
참조 메소드
getElementByID(id) : id에 해당하는 document 객체를 참조
getElementsByName(name) : 태그의 name에 속성에 해당하는 document 객체를 참조
getElementsByTagName(tagName) : 태그에 해당하는 document 객체를 참조
- 사용 예시
var ele=document.getElementById('hello'); // hello라는 id를 갖는 객체 참조
ele.innerHTML='
';
ele.src='2.jpg'; // ele에는 참조 주소값이 저장되었기 때문에 객체의 속성 변경 가능
- 주의점: document 객체의 경우 다양한 속성을 가지고 있기 때문에 for in 반복문이 아닌 기본 반복문을 사용해야 함
5) 선택자를 사용해서 객체 참조
-
CSS 선택자로 document 객체를 참조 가능
-
선택자를 이용한 참조 방법
querySelector(선택자) : 선택자로 가장 처음 선택되는 문서 객체 참조
querySelectorAll(선택자) : 선택자에 해당하는 모든 문서 객체의 참조값을 배열로 반환
6) 스타일 조작
-
document 객체의 style 속성을 이용해서 스타일 변경 가능
-
스타일 변경 방법
대상노드.style.스타일속성 = '속성값';
- 스타일 속성 중 '-' 이 들어가있는 속성은 하이픈 삭제 후 연결되는 첫 글자를 대문자로 변경
ex.// header.style.background-color = 'red'; // 에러
header.style.backgroundColor = 'red'; // 올바른 사용 방법
7) document 객체의 노드 제거
-
노드를 제거할 땐 노드 제거 메소드를 사용
-
노드 제거 메소드
removeChild(child) : document 객체의 자식 노드를 제거
- 일반적인 사용 방식
대상노드.parentNode.removeChild(대상노드); // 좌측의 형태로 제거
