Reference

웹 브라우저/페이지 제어를 위한 인터페이스

public 2025. 8. 5. 19:22

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.

[참고자료]