ESTsoft/사전 VOD

[JS] 브라우저 및 문서 객체

효땡 2024. 5. 22. 18:02

[브라우저 객체 모델]

브라우저 객체 모델

- 웹 브라우저와 관련된 객체의 집함

- 대표적인 브라우저 객체 모델 

  -> window, location, navigator, history, screen, document 객체

 

window 객체

- window 객체의 속성

- 많은 속성이 있음

- 일부 익스플로러에서는 실행되지 않음

- window 객체는 브라우저 기반 자바스크립트의 최상위 객체

- alert(), prompt() 함수 모두 window 객체의 메소드

 

새로운 window 객체 생성

- window 객체 생성

  * open() 메소드는 네 개의 매개변수가 있음

  * 입력해도 되고 입력하지 않아도 되는 매개변수를 옵션이라고 함

  * open() 메소드의 모든 매개변수는 옵션

메소드 이름 설명
open(URL, name, features, replace) 새로운 window 객체 생성

 

- open() 메소드의 옵션을 사용하지 않은 예

- 옵션을 사용한 open() 메소드와 차이가 없음

<script>
	window.open();
</script>
<script>
	window.open('http://hanb.co.kr', 'child', 'width=600, height=300', true);
</script>

 

- open() 메소드의 첫 번째 매개변수

  * 열고자 하는 HTML 페이지의 URL

- open() 메소드의 두 번째 매개변수

  * 윈도우 간 통신하는 데 사용하는 윈도우 이름

- oepn() 메소드의 세 번째 매개변수

  * 윈도우 출력 모양을 지정하는 옵션

- open() 메소드의 네 번째 매개변수

  * URL이 새로운 것인가 기존의 문서를 대체할 것인가를 나타내는 부울값

 

새로운 window 객체 생성

옵션 이름 설명 입력할 수 있는 값
height 새 윈도우의 높이 픽셀 값
width 새 윈도우의 너비 픽셀 값
location 주소 입력창의 유무 yes, no, 1, 0
menubar 메뉴의 유무 yes, no, 1, 0
resizable 화면 크기 조절 가능 여부 yes, no, 1, 0
status 상태 표시줄의 유무 yes, no, 1, 0
toolbar 상태 표시줄의 유무 yes, no, 1, 0

 

- open() 메소드의 속성과 메소드

<script>
	//변수 선언
    var child = window.open(",", 'width=300, height='200');
    
    //출력
    child.document.write('<h1>Form Parent Window</h1>');
</script>

 

- window 객체는 자신의 형태와 위치를 변경할 수 있도록 메소드 제공

메소드 이름 설명
moveBy(x,y) 윈도우의 위치를 상대적으로 이동
moveTo(x.y) 윈도우의 위치를 절대적으로 이동
resizeBy(x,y) 윈도우의 크기를 상대적으로 지정
resizeTo(x,y) 윈도우의 크기를 절대적으로 지정
scrollBy(x,y) 윈도우 스크롤의 위치를 상대적으로 이동
scrollTo(x,y) 윈도우 스크롤의 위치를 절대적으로 이동
focus() 윈도우에 초점을 맞춤
blur() 윈도우에 초점을 제거
close() 윈도우 닫기

 

window 객체의 기본 메소드

- 상대 이동과 절대 이동(새로운 창이 지정 경로로 이동)

  * __By()형태의 메소드

    -> 현재의 윈도우를 기준으로 상대적으로 속성을 변화

  * __To()형태의 메소드

    -> 절대적인 기준으로 속성을 변화

<script>
	//변수 선언
    var child = window.open(",", 'width=300, height=200');
    
    child.moveTo(0,0);
    
    //1초마다 함수 실행
    setInterval(function (){
    	child.moveBy(10,10);
    }, 1000);
</script>

 

screen 객체

- 웹 브라우저의 화면이 아닌 운영체제 화면의 속성을 가지는 객체

- screen 객체의 속성

속성 이름 설명
width 화면의 너비
height 화면의 높이
availWidth 실제 화면에서 사용가능한 너비
availHeight 실제 화면에서 사용가능한 높이
colorDepth 사용가능한 색상 수
pixelDepth 한 픽셀당 비트 수
<script>
	//출력
    var output = '';
    for(var key in screen){
    	output += ' ' + key + ';' + screen[key] + '\n';
    }
    alert(output);
</script>

 

location 객체

- 브라우저의 주소 표시줄과 관련된 객체

- location 객체는 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있음

- location 객체 속성

속성 이름 설명
href 문서의 URL 주소 http://www.example.com/
host 호스트 이름과 포트 번호 localhost:30763
hostname 호스트 이름 localhost
port 포트 번호 30763
pathname 디렉토리 경로 /Projects/Location.htm
hash 앵커 이름(#~) #beta
search 요청 매개변수 ?param=10
protocol 프로토콜 종류 htttp:

 

- replace() 메소드는 뒤로 가기 버튼을 사용할 수 없음

속성 이름 설명
assign(link) 현재 위치를 이동
reload() 새로고침
replace(URL) 현재 위치를 이동

 

- navigator 속성

속성 이름 설명
appCodeName 브라우저의 코드명
appName 브라우저의 이름
appVersion 브라우저의 버전
platform 사용 중인 운영체제의 시스템 환경
userAgent 브라우저의 전체적인 정보

 

onload 이벤트 속성

- 문서 객체 속성 중 'on'으로 시작하는 속성을 이벤트 속성이라 부르고 함수를 할당해야 함

- onload 이벤트 속성

<script>
	window.onload = function(){
    
    };
</script>

 

window 객체의 로드 완료

- window 객체 로드가 완료되는 때는?

  -> HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 로드가 완료되는 순간

- HTML 페이지 생성 순서

<!DOCTYPE html>
<html>
<head>
	<title>Document Object Model</title>
    <script>alert('Process - 0')</script>
</head>
<body>
	<h1>Process - 1</h1>
    <script>alert('Process - 2')</script>
    <h2>Process - 2</h2>
    <script>alert('Process - 3')</script>
</body>
</html>

 

[문서 객체 모델]

문서 객체 모델

- 넓은 의미

  -> 웹 브라우저가 HTML 페이지를 인식하는 방식

- 좁은 읨

  -> document 객체와 관련된 객체의 집합

- 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있음

- 태그

  * HTML 페이지에 존재하는 html이나 body 태그를 '태그'라고 부름

- 문서 객체

  * html이나 body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 문서 객체임

- 노드

  * 요소 노드

    -> HTML 태그를 의미

  * 텍스트 노드

    -> 요소 노드 안에 들어 있는 글자를 의미

 

문서 객체 만들기

- 텍스트 노드를 갖는 문서 객체

  * 요소 노드와 텍스트 노드 생성 후 텍스트 노드를 요소 노드에 붙여 줌

- document 객체의 노드 생성 메소드

메소드 이름 설명
createElement(tagName) 요소 노드 생성
createTextNode(text) 텍스트 노드 생성

 

- 화면에 문서를 출력하려면 생성한 문서 객체를 body 문서 객체에 연결

메소드 이름 설명
appendChild(node) 객체에 노드 연결

- 텍스트 노드를 갖지 않는 문서 객체

- 텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img

  * img 태그는 텍스트 노드 대신에 많은 속성이 있음

  * img 태그 생성 후 body 문서 객체에 연결

- 문서 객체 생성

<script>
	window.onload = function(){
    	//변수 선언
        var img - document.createElement('img');
        //노드 연결
        document.body.appendChild(img)
    };
</script>

 

문서 객체 만들기

- 텍스트 노드를 갖지 않는 문서 객체

- img 태그에 이미지를 넣으려면 src 속성 지정

  * 코드를 실행하면 이미지 출력

- 문서 객체의 속성 지정

<script>
	window.onload = function(){
    	//변수 선언
        var img = document.createElement("img");
        img.src = 'Penguins.jpg';
        img.width = 500;
        img.height = 350;
        
        //노드 연결
        docuement.body.appendChild(img)
    };
</script>

 

- innerHTML

  * 문서 객체 내부의 글자를 나타냄

- 문서 객체의 innerHTML 속성

<h1> //여는 태그
Hello DOM..! //innerHTML 속성
</h1> //닫는 태그
<script>
	window.onload = function (){
    //변수 선언
    var output = '';
    
    //innerHTML 속성에 문자열을 할당
    document.body.innerHTML = output;
    };
</script>

 

- HTML 태그를 자바스크립트로 가져오는 방법

  * document 객체가 가지는 아래표 메소드를 사용

  * document 객체의 getElementById() 메소드는 id 속성을 갖는 태그만 가져올 수 있으므로 id속성을 입력

메소드 이름 설명
getElementById(id) 태그의 id 속성이 id와 일치한느 문서 객체를 가져옴

 

  * header1과 header2는 문서 객체이므로 뒤에 점을 찍어주면 문서 객체의 속성과 메소드를 살펴볼 수 있음

- header1 객체의 속성

window.onload = function (){
	//문서 객체 가져오기
    var header1 = document.getElementById('header - 1');
    var header2 = document.getElementById('header - 2');
    
    header1.inn
};

 

  *innerHTML 속성 변경

<script>
	window.onload = function () {
    //문서 객체 가져오기
    var header1 = docuement.getElementById('header - 1');
    var header2 = document. getElementById('header - 2');
    
    //문서 객체의 속성 변경
    header1.innerHTML = 'with getElementById()';
    header2.innerHTML = 'with getElementById()';
    };
</script>

with getElementById()
with getElementById()

 

- 여러 개의 문서 객체 가져오는 방법

  * document 객체의 getElementById() 메소드는 한 번에 한 가지 문서 객체만 가져올 수 있음

  * 아래 표를 이용해서 여러 개의 객체를 가져올 수 있음

메소드 이름 설명
getElementsByName(name) 태그의 name 속성이 name과 일치하는 문서 객체를 배열로 가져옴
getElementsByTagName(tagName) tagName과 일치하는 문서 객체를 배열로 가져옴

 

- 여러 개의 문서 객체 가져오는 방법

<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
    <script>
    	window.onload = function (){
        	//문서 객체 가져오기
            var headers = document.getElementsByTagName('h1');
        };
</head>
<body>
	<h1>Header</h1>
    <h1>Header</h1>
</body>
    </script>

 

문서 객체의 스타일 조작

- 문서 객체의 스타일 변경

- style 속성 사용

- getElementById() 메소드로 문서 객체를 가져옴

- style 속성에 있는 border, color, fontFamily 속성을 지정

- CSS에 입력하는 것과 같은 형식으로 입력

- 문서 객체의 style 속성

메소드 이름 설명
removeChild(child) 문서 객체의 자식 노드를 제거

 

- h1 태그 제거

<body>
	<h1 id = "will-remove">Header</h1>
</body>

 

- 문서 객체의 제거

<script>
	window.onload = function(){
    	//문서 객체 가져오기
        var willRemove = document.getElementById('will-remove');
        
        //문서 객체 제거
        document.body.removeChild(willRemove);
    };
</script>

 

- parentNode와 childNode의 관계

 

 

Q. 상대 이동과 절대 이동 (새로운 창이 지정 경로로 이동)

<script>
	//변수 선언
    var child = window.open('', '', 'width=300, height=200');
    
    child.moveTo(0, 0);
    
    //1초마다 함수 실행
    setInterval(function (){
    	child.moveBy(10,10);
    },1000);
</script>