[JS] 브라우저 객체 모델 BOM

자바스크립트를 이용하여 브라우저 자체에 접근하는 방법을 알아본다.

브라우저 객체 모델이란?
window 객체

브라우저 객체 모델이란?

자바스크립트를 이용하면 HTML 태그에 대한 접근 뿐만이 아니라 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.

이 때 사용하는 객체 모델을 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다.

브라우저의 종류는 익스플로러, 크롬, 파이어폭스 등 다양하다.

때문에 BOM은 DOM과 다르게 W3C의 표준 객체 모델이 아니다.

하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다.

이러한 BOM객체들을 전역 객체로 사용할 수 있다.

window 객체

window객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다.

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window객체의 프로퍼티가 된다.

window객체의 메소드는 전역함수, window객체의 프로퍼티는 전역변수가 된다.

DOM요소들도 모두 window객체의 프로퍼티가 된다. (document키워드 앞에는 window. 가 생략되어있다.)

window.onload = function(){}

스크립트 언어는 위에서 아래로 해석되기 때문에 DOM에서 HTML요소를 추출할 때 body보다 위에 있으면 해석 순서에 오류가 생길 수 있다.

예를 들어 body태그 바로 위에 script태그가 있다면, 그리고 script태그에서 DOM객체를 불러오는 작업이 있다면 오류가 발생할 수 있다. 아래에서 확인하자.

ex)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script태그 위치에 따른 DOM객체 오류 확인</title>
</head>
<script>
	document.getElementById("strong").innerHTML = "변경된 strong태그";
</script>
<body>
	<strong id="strong">strong태그</strong>
</body>
</html>

See the Pen LYbyjaz by Heekng (@heekng) on CodePen.

위처럼 script태그를 body태그와 meta태그 사이에 넣고, script태그에서 body태그의 내용을 변경하려 하면 아직 body태그가 해석되기 전에 body를 변경하려 시도하기 때문에 DOM객체 변경 코드가 적용되지 않고 오류가 나온다.

위같은 상황에는 script문서를 body태그 아래로 옮겨야 하는데, HTML문서가 길어지게 된다면 가독성이 좋지 않고 불편할 수 있다.

따라서 window.onload를 사용하면 문서가 준비된 이후에 javascript작업을 실행할 수 있다.

window.onload = function(){[페이지가 로드된 이후 실행할 javascript코드]} 의 형태로 작성한다.

ex)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window 객체 예제</title>
</head>
<body>
</body>
<script>
	window.onload = function(){
		window.setTimeout(function() {
			//false: 보류(사용하지 말자..) default값
			//true: 현재 히스토리 대체(뒤로가기 방지)
			//var w = window.open("https://www.naver.com", "_self", "width=600px, height=300px", true);
			var w = window.open("https://www.naver.com", "_child", "width=600px, height=300px", true);
		}, 3000);
	}
</script>
</html>

See the Pen zYowEYZ by Heekng (@heekng) on CodePen.

위처럼 window.onload를 이용하면 중괄호 안에 작성한 코드를 HTML문서가 모두 로드된 이후에 작업을 수행한다.

window.open()

window 객체의 open() 메소드를 이용하면, 새로운 브라우저 창을 열 수 있다.

또한 새로운 브라우저 창의 세부적인 옵션들도 일일이 설정할 수 있다.

var 객체명 = window.open(url, name, specs, replace); 의 형태로 작성한다.

1. 객체명

새로 만들어진 창 객체가 반환되고, 창의 생성에 실패하면 null을 리턴한다.

이 객체를 통해서 새 창을 제어할 수 있고, 객체명.close();로 창을 닫을 수 있다.

2. url

새 창의 주소를 입력한다.

3. name

새 창이 열리는 위치를 설정한다.

_blank : 새 창(default)

_parent : 현재 작업 창의 부모 프레임

_child : 현재 페이지의 자식 페이지 (서브 창)

_self : 현재 페이지

4. specs

선택적인 값으로 창의 크기, 스크롤 여부, 리사이즈 가능 등의 속성을 지정한다.

height = 픽셀 : 창의 높이

width = 픽셀 : 창의 너비

등..

5. replace

히스토리 목록에 새 항목을 만들지, 현재 항목을 대체할 지 지정한다.

간단하게 생각하면 뒤로가기 가능여부로 따질 수 있다.

true : 현재 히스토리 대체, 뒤로가기 불가능

false : 히스토리에 새 항목 만들기, 뒤로가기 가능

ex)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window.open() 사용</title>
</head>
<body>
	<h3>window.open() 사용하기</h3>
	<p>heekng 블로그로 이동하기</p>
	<button onclick="windowOpen()">버튼</button>
</body>
<script>
	function windowOpen(){
		var newWindow = window.open("https://heekng.tistory.com/", "_child", "height=400px, width=300px", true);
	}
</script>
</html>

See the Pen bGBWoLd by Heekng (@heekng) on CodePen.

window.setTimeout(function(){}, 밀리초);

JAVA의 Thread.sleep()과 비슷한 역할을 한다.

일정 밀리초만큼 멈춘 후, 작성한 함수를 수행한다.

EX)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>버튼을 누르면 3초 후 문자 변경</title>
</head>
<body>
	<h3>버튼을 누르면 3초 후 문자 변경</h3>
	<p id="text">버튼을 누르기 전</p>
	<button onclick="clickBtn()">버튼</button>
</body>
<script>
	function clickBtn(){
		window.setTimeout(function(){
			var ptag = document.getElementById("text");
			ptag.innerHTML = "버튼을 누르고 3초가 지났다!";
			ptag.style.background = "cyan";
		}, 3000);
	}
</script>
</html>

See the Pen QWGvqPd by Heekng (@heekng) on CodePen.

2021/02/17 - [Javascript/Javascript정리] - [JS] 브라우저 객체 모델 BOM - 2

저작자표시 비영리 변경금지

'JS & TS > Javascipt' 카테고리의 다른 글

win-jenv 첫 오픈소스 프로젝트 (0)	2022.04.02
[JS] 브라우저 객체 모델 BOM - 2 (0)	2021.02.17
[JS] DOM 객체, 프로퍼티 (0)	2021.02.14
[JS] 객체, 프로토타입, property (0)	2021.02.13
[JS] 함수 function (0)	2021.02.12
[JS] 값 비교하기(==, ===) (0)	2021.02.12

수학하다 개발하기

[JS] 브라우저 객체 모델 BOM - 1