HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 15. document 객체

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 document 객체를 이용하여 웹 문서와 관련된 여러 정보를 알아낼 수 있다. anchor 객체와 link 객체를 이용하여 웹 문서의 링크 정보를 활용할 수 있다. image 객체를 이용하여 웹 문서에 삽입된 이미지의 다양한 정보를 알 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 document 객체 window 객체의 하위 객체이며 웹 문서와 관련된 여러 정보를 가지고 있다.
프로퍼티 설명 anchors 책갈피 layers 레이어 applets 웹 문서 안의 자바 애플릿 lastModified 웹 문서 최종 수정일 cookies 쿠키 값 저장 links 링크 domain 현재 서버의 도메인 location 현재 문서의 주소 embeds 플러그인 설정 referrer 현재 문서를 호출한 페이지 주소 forms 폼 title 현재 문서의 제목 images 이미지 URL

5 document 객체 document 객체의 메서드 메서드 설명 clear() 문서 안의 내용을 깨끗이 지운다. close()
open() 메서드를 통해 기록하기 시작한 문서의 기록을 종료한다. open() 문서에 무엇인가를 기록하기 시작한다. write() 문서에 내용을 표시한다. writeln() 문서에 내용을 표시하는데 메서드를 적용할 때마다 새로운 줄에 표시한다. HTML CSS 자바스크립트 무작정 따라하기

6 anchor 객체 document의 하위 객체로, 문서 안의 앵커(anchor) 정보를 가지고 있다.
웹 문서에는 앵커가 여러 개이기 때문에 앵커 정보는 배열 형태로 저장해야 하고, 문서에 삽입된 순서대로 저장된다. 기본형식 document.anchors(인덱스) anchor 객체의 프로퍼티 length 프로퍼티에 문서 안의 앵커 개수 정보가 있다. HTML CSS 자바스크립트 무작정 따라하기

7 link 객체 웹 문서 안의 모든 링크 정보를 가지고 있다.
하나의 웹 문서에 링크가 여러 개이기 때문에 링크 정보는 links 라는 배열 형태로 저장된다. 기본형식 document.links(인덱스) link 객체의 프로퍼티 length 프로퍼티에는 문서 안의 앵커 개수 정보가 있다. 프로퍼티 설명 hash 표식 이름 port 포트 번호 host 링크에 연결된 URL과 호스트 이름, 포트 번호 protocol 프로토콜 종류 hostname 링크에 연결된 URL과 호스트 이름 search 검색엔진을 불러온다. href 링크에 연결된 URL target 지정된 URL 문서를 어디에 보여줄 것인지 표시한다. pathname 폴더 경로 HTML CSS 자바스크립트 무작정 따라하기

8 image 객체 웹 문서에 삽입된 모든 이미지를 탐색하여 이미지의 src와 크기, 기타 다른 정보들을 넘겨받고 저장한다.
기본형식 document.images(인덱스) document.이미지명 image 객체의 프로퍼티 프로퍼티 설명 align 이미지의 정렬 방법 lowsrc 저해상도 이미지 경과 border 이미지의 테두리선 name 이미지에 대한 이름 complete 이미지 전송 완료 여부 (true/false) src 이미지의 소스 파일 height 이미지의 세로 길이 vspace 이미지의 상하 여백 hspace 이미지 좌우의 여백 width 이미지의 너비 길이 HTML CSS 자바스크립트 무작정 따라하기