[브라우저 객체 모델]
브라우저 객체 모델
- 웹 브라우저와 관련된 객체의 집함
- 대표적인 브라우저 객체 모델
-> 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>
'ESTsoft > 사전 VOD' 카테고리의 다른 글
| [JS] 자바스크립트 API 활용 및 그림판 프로그램 만들기 (0) | 2024.05.27 |
|---|---|
| [JS] 자바스크립트 예외처리 및 이벤트 처리 (0) | 2024.05.25 |
| [JS] 자바스크립트 내장 객체 (0) | 2024.05.22 |
| [JS] 자바스크립트 함수 (0) | 2024.05.21 |
| [JS] 자바스크립트 사용자 정의 자료형 활용 (0) | 2024.05.21 |
