window 객체 & BOM

window 객체

브라우저의 요소들과 자바스크립트 엔진, 모든 전역변수를 담고 있는 객체.

window 객체 아래, 대표적으로 screen, location, history, document 같은 객체들이 자주 쓰인다.

메소드는 parseInt, isNaN 같은 게 있다.

window는 전역객체(글로벌객체)이므로 모든 객체를 다 포함하고 있기 때문에 사용할 때 window를 그냥 생략해도 된다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 window를 붙여주는 것도 괜찮다. 생략하냐 마냐는 각자의 스타일에 맡기면 된다.

 

---

window.close()

현재 창을 닫는다. window는 생략가능하기 때문에 close(); 라고 작성해도 된다.

 

window.open()

새 창을 연다.

1. 첫 번째 인자: 페이지 주소
2. 두 번째 인자: 새 탭으로 열지 여부. (새 탭: 생략, 현재 탭: '_self')
3. 세 번째 인자: 팝업창 여부(=창 크기 설정)

open('https://www.naver.com'); // 새 탭
open('https://www.naver.com', '_self'); // 현재 탭
open('https://www.naver.com', '', 'width=200, height=200'); // 가로 세로 200px 팝업창

새로 연 창을 변수에 저장할 수도 있다. 그리고 그 변수를 이용하여 변수.document.write로 새 창의 내용을 변경할 수 있다.

var popup = window.open('', '', 'width=200, heigh=200');
popup.document.write('hi');

나중에 팝업 창을 닫고 싶으면 아래와 같이 입력하면 된다.

popup.close();

또 opener 객체를 사용하여 팝업창에서 원래 탭에 접근할 수도 있다.

popup.opener.document.write('hello');

 

BOM

window 객체 아래의 전역객체 중에서 자주 쓰이는 것들이 있다.

이 중에서 document는 DOM이라 불리고, 나머지는 브라우저에 대한 정보를 가지고 있어서 BOM(Browser Object Model)이라고 불린다.

---

navigator

브라우저와 운영체제에 대한 정보가 있다(navigator.userAgent).

userAgent 정보를 이용하면, 고객에 대한 정보를 분석하는 분석 사이트를 만들 수 있다. 또는 브라우저에 따라 다른 동작을 해야 하거나, IE같은 브라우저인지 체크할 때 사용된다. 또 GPS나 핸드폰 배터리를 체크하는 기능도 있기 때문에 모바일 환경에서도 유용하게 쓰일 수 있다.

navigator.userAgent; // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36"

➡ 윈도우10 64bit, 크롬 54버전 사용 중. 기타 정보들도 확인할 수 있다.

아래는 기타 정보를 확인하는 예시이다.

navigator.language; // "ko"
navigator.cookieEnabled; // true
navigator.vendor; // "Google Inc"

 

screen

화면에 대한 정보를 알려준다. 

• 너비(width), 높이(hegiht), 픽셀(pixelDepth), 컬러(colorDepth), 화면 방향(orientation), 작업표시줄 제외한 너비와 높이(availWidth, availHeight), ... 등
• 화면 크기에 따라 다른 동작을 하고 싶을 때 사용한다.

screen.availHeight; // 1080
screen.availWidth; // 1920
screen.colorDepth; // 24

 

location

주소에 대한 정보를 알려준다.

• 속성: protocol, host, hostname, pathname, href, port, search, hash

location.reload();

새로고침

location.replace();

현재 주소를 다른 주소로 교체하기 (다른 페이지로 이동하지만 이전 페이지의 기록이 남지 않는다.)

location.host; // "www.zerocho.com"
location.hostname; // "www.zerocho.com"
location.protocol; // "https:"
location.href; // "https://www.zerocho.com/category/Javascript/post/..."
location.pathname; // "/category/Javascript/post/..."

 

history

history.forward();

앞으로 가기(=history.go(1);)

history.back();

뒤로 가기(=history.go(-1);

history.go(페이지수);

히스토리간 이동하기

history.length;

뒤로가기 할 수 있는 페이지의 개수

history.pushState(객체, 제목, 주소); / history.replaceState(객체, 제목, 주소)

HTML5에 추가된 객체.

페이지를 이동하지 않고 단순히 주소만 바꿔준다. 대신 객체 부분에 페이지에 대한 정보를 추가할 수 있다.

주로 단일 페이지 어플리케이션을 만들 때 자주 사용된다. (ex. 페이지 깜빡임 없이 주소 바꾸기, 바뀐 주소에 따른 액션 취하기)

 

document

웹페이지, 즉 html에 관한 것들을 담당하는 객체. 대부분이 태그를 선택하고 조작하는데 사용된다.

윈도우 객체의 속성이기 때문에 window.document로 접근해야 한다. (=window는 생략 가능하므로 document로 접근하면 된다)

document.getElementBy~('~명');

• document.getElementById('id명'); - html에서 해당 아이디를 가진 태그를 선택한다.
• document.getElementByClassName('클래스명');
• document.getElementByName('이름');
• document.getElementsByTagName('태그명'); - 태그명. (ex. nav, section, header, footer, ...)

document.getElementsByTagName('nav'); // [<nav class="pTYnty2zkYzsdEoN1fhmO" data-reactid="8">…</nav>]

document.querySelector('선택자'), document.querySelectorAll('선택자');

css선택자로 선택할 수 있다. 아이디는 #, 클래스는 .

태그명[속성명=속성값],부모>자식 혹은 부모 자손 등 css의 선택자는 거의 다 쓸 수 있다.

getElementBy~메소드보다 이 메소드가 더 간편하게 사용할 수 있기 때문에 실제로 더 많이 사용된다.

document.querySelector('#app-root'); // <div id="app-root" data-reactid="32">...</div>

document.createElement('태그명');

원하는 '태그명'으로 document에 새로운 태그를 만들 수 있다.

만든다고 바로 생기는 게 아니고, 변수를 통해 메모리에 저장된다. 만든 태그를 추가하는 메소드는 따로 있다.

var div = document.createElement('div');	//메모리에 div태그가 생성됨

document.createTextNode('텍스트');

텍스트도 하나의 요소로, 텍스트를 따로 만들 수 있다.

여기서 Node는 태그와 텍스트를 가리키는 명칭이다. 이도 바로 생기는 게 아니라, 변수를 통해 메모리에 저장된다. 추가하는 메소드는 따로 있다.

var text = document.createTextNode('텍스트');

document.createDocumentFragment();

가짜 document를 만든다.

자바스크립트로 document의 태그를 조작하는 건 성능이 매우 떨어진다. (특히 여러 태그를 반복문을 통해 동시에 추가하는 경우)

이럴 때에는 가짜 document를 만들고, 여기에 모든 태그를 추가하고, 한 번에 document에 추가하면 된다. 이러면 document는 한 번만 조작되므로 성능에 부담이 덜한다.

- document에 추가: appendChild 메소드

var div = document.createElement('div');
var text = document.createTextNode('텍스트');
var fragment = document.createDocumentFragment();
div.appendChild(text);
fragment.appendChild(div);
document.body.appendChild(fragment);

➡ 가짜 document(=fragment)를 만들고, 이 document에 appendChild 메소드를 이용하여 태그와 텍스트를 추가한다. 그리고 마지막으로 실제 document의 body에 요소들이 추가된 가짜 document(=fragment)를 appendChild 메소드를 이용하여 모두 추가한다.

(여기서 직접적으로 body에 영향을 주는 것은 fragment를 추가할 때 단 한 번 뿐임! 

appendChild 조작을 많이 해야 할 경우, fragment에 추가한 후, 마지막에 fragment를 한 번만 추가하면 된다!)

document.head, document.body

html의 head와 body에 접근한다.

document.anchors, document,links, document,forms, document.images, document.scripts

html의 앵커, 링크, 폼, 이미지, 스크립트에 접근한다.

document.title

문서의 제목에 접근한다(변경도 가능). 

document.title = '문서 제목 수정하기';

 

---

참고

(JavaScript) Window 객체와 BOM

 

(JavaScript) Document 객체