DOM
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.
예를 들어, 표준 DOM 에서는 문서 안에서 모든
<P>elements 에 대한 list 를 리턴하는getElementsByTagNamemethod 를 정의하고 있다:
객체 정의
자바스크립트 객체 :
외장 객체 - 1. 사용자 정의 객체 : 개발자가 필요에 따라 정의하여 사용하는 객체
내장 객체 - 자바스크립트 내에 내장
2. 데이터형 객체(Date, String, Video, Audio, Number, ...),
- 특정 데이터 형을 처리하기 위한 메소드와 속성을 제공
3. BOM 객체 : (Window, screen, document, navigater, location, history(방문록 저장))
- 브라우저를 제어할 목적으로 메소드와 속성을 제공
4. DOM 객체 : document
- 현재 문서 안에 있는 태그를 제어할 목적으로 메소드와 속성을 제공
인자
fullscreen = yes|no|1|0 - 전체 화면 모드 여부
width=pixels - 창 너비
height=pixels - 창 높이
window.open(갈곳, 창, 스펙)
left = pixels - 왼쪽으로 부터의 위치
top = pixels - 위쪽으로 부터의 위치
location = yes|no|1|0 - 주소 표시줄 표시 여부
menubar = yes|no|1|0 - 메뉴바 표시 여부
toolbar = yes|no|1|0 - 툴바 표시 여부
status = yes|no|1|0 - 상태바 표시 여부
titlebar = yes|no|1|0 - 제목바 표시 여부
scrollbars = yes|no|1|0 - 스크롤바 표시 여부
resizable = yes|no|1|0 - 창의 크기조절 가능 여부
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 기본 09 - BOM 객체</title>
<script>
/*
자바스크립트 객체 :
외장 객체 - 1. 사용자 정의 객체 : 개발자가 필요에 따라 정의하여 사용하는 객체
내장 객체 - 자바스크립트 내에 내장
2. 데이터형 객체(Date, String, Video, Audio, Number, ...),
- 특정 데이터 형을 처리하기 위한 메소드와 속성을 제공
3. BOM 객체 : (Window, screen, document, navigater, location, history(방문록 저장))
- 브라우저를 제어할 목적으로 메소드와 속성을 제공
4. DOM 객체 : document
- 현재 문서 안에 있는 태그를 제어할 목적으로 메소드와 속성을 제공
*/
</script>
</head>
<body>
<h2>BOM(Browser Objects Model) 객체</h2>
<p>window, screen, document, navigater, location, history</p>
<hr>
<form action="" method="post" id="frm2" name="frm2">
<input type="text" id="id" name="id" required>
<button type="button" onclick="idcheck()">아이디 중복 체크</button>
</form>
<script>
// fullscreen = yes|no|1|0 - 전체 화면 모드 여부
// width=pixels - 창 너비
// height=pixels - 창 높이
// window.open(갈곳, 창, 스펙)
// left = pixels - 왼쪽으로 부터의 위치
// top = pixels - 위쪽으로 부터의 위치
// location = yes|no|1|0 - 주소 표시줄 표시 여부
// menubar = yes|no|1|0 - 메뉴바 표시 여부
// toolbar = yes|no|1|0 - 툴바 표시 여부
// status = yes|no|1|0 - 상태바 표시 여부
// titlebar = yes|no|1|0 - 제목바 표시 여부
// scrollbars = yes|no|1|0 - 스크롤바 표시 여부
// resizable = yes|no|1|0 - 창의 크기조절 가능 여부
function idcheck() {
var id = document.getElementById('id')
if(id.value=="") {
alert('아이디 입력칸이 비어있습니다.')
id.focus()
return false
} else {
var win1 = window.open('idcheck.html', "child", "width=600, height=400, top=100, left=100, location=no, menubar=no, toolbar=no")
}
}
</script>
</body>
</html>