웹 브라우저/페이지 제어를 위한 인터페이스
1. Document Object Model
1.1. 개요
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>HTML DOM</h1>
<p class="text">DOM 트리</p>
</body>
</html>
See the Pen public.re.kr/52-1-1-01 by Lee Deokho (@duqe) on CodePen.
1.2. DOM 객체의 접근방법
See the Pen public.re.kr/52-1-2-01 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-1-2-02 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-1-2-03 by Lee Deokho (@duqe) on CodePen.
1.3. DOM 요소 객체 수정
See the Pen public.re.kr/52-1-3-01 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-1-3-02 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-1-3-03 by Lee Deokho (@duqe) on CodePen.
1.4. DOM 객체의 삽입과 삭제
See the Pen public.re.kr/52-1-4-01 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-1-4-02 by Lee Deokho (@duqe) on CodePen.
2. Browser Object Model
2.1. 개요(및 비window 객체의 속성과 메서드)
객체 | 속성 | 메서드 |
history | hash host, hostname, href, pathname, port, protocol 등 | assign(), reload(), replace() |
location | length | back(), forward(), go() |
navigator | appCodeName, appName, appVersion, language, platform, product, vendor 등 | javaEnabled() |
screen | avaiHeight, avaiWidth, pixelDepth, colorDepth, height, width | -- |
2.2. window 객체
window 객체의 주요 메서드 | 설명 |
open() | 새로운 윈도우 열기 - Param1: URL - Param2: target - Param3: height(pixel), width(pixel), left(pixel), top(pixel), location(yes/no), menubar(yes/no), status(yes/no) , resizeable(yes/no) |
close() | 열림 창 닫기 |
setInterval() | 일정 시간 간격으로 함수를 반복적 호출, 함수 수행을 중지하기 위해 clearInterval() 사용 |
setTimeout() | 일정 시간 후에 지정 함수 수행, 함수 수행 중지를 위해 clearTimeout() 사용 |
alert() | 경고창 표시 |
confirm() | 확인창 표시 |
prompt() | 입력창 표시 |
moveBy(폭, 높이) | 윈도우를 현재 위치에서 지정한 픽셀만큼 이동 |
moveTo(x좌표, y좌표) | 윈도우를 지정한 위치로 이동 |
resizeBy(폭, 높이) | 윈도우의 크기를 지정된 크기 만큼 변경 |
resizeTo(x좌표, y좌표) | 윈도우의 크기를 지정한 크기로 변경 |
See the Pen public.re.kr/52-2-2-01-main by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-2-2-02 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-2-2-03 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-2-2-04 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-2-2-05 by Lee Deokho (@duqe) on CodePen.
See the Pen public.re.kr/52-2-2-06 by Lee Deokho (@duqe) on CodePen.
[참고자료]
- 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023.
- Mozilla Foundation, Mozilla Developer Network (https://developer.mozilla.org)