[객체] 2. HTML DOM 객체 - 3) document 객체

1. document 개요

-document 객체는 이름 그대로 HTML 문서 전체를 대변하는 객체이며, 모든 DOM 객체를 접근하는 경로의 시작점이다.

-또한 HTML 문서에 만들어진 동일한 이름의 HTML 태그들을 배열처럼 접근할 수 있는 컬렉션을 두고 있음

  예를 들면, 모든 <img> 태그들은 images 컬렉션으로, 모든 <form>태그들은 forms 컬렉션으로 접근 가능

- document 객체는 window 의 자식으로 window.document 또는 document 방법으로 접근 가능

- ★ document 객체는 DOM 객체가 아니다. 연결된 css3 스타일 시트도 없고, 따라서 style 객체도 없다. 

      document.style.color= "red"; // 이 코드는 잘못된 코드

 

2. document 객체의 주요 프로퍼티, 컬렉션, 메소드

1) 프로퍼티

프로퍼티	설명	r/w
location	현재 문서의 URL 정보를 가진 location 객체의 레퍼런스	w
domain	서버의 도메인 이름	r
referrer	이 HTML 문서를 로드한 원래 문서의 URL 문자열. 이 문서가 처음이면 빈 문자열	r
cookie	쿠키에 대한 레퍼런스	r/w
lastModified	"MM/DD/YYYY hhmmss" 형식. 문서의 최근 수정 시간	r
readyState	문서의 현재 로딩 상태를 나타내는 문자열. 로딩되는 동안 "loading","interactive","complete" 순으로 변함 "interactive"는 문서의 파싱(해독)이 끝난 상태로, 여전히 로딩 중. 이 때 사용자는 보이는 폼 요소에 입력 가능. 문서가 완전히 화면에 출력되면 "complete"로 변경	r
title	문서의 제목 문자열. <title> 태그가 없으면 빈 문자열	r/w
body	body 객체에 대한 레퍼런스	r/w
head	head 객체에 대한 레퍼런스	r
defaultView	문서가 출력된 브라우저 윈도우(window)에 대한 레퍼런스	r
activeElement	문서가 포커스를 받을 때 문서 내 포커스를 받는 자식 객체	r
documentElement	html 객체에 대한 레퍼런스	r
URL	현재 문서의 URL	r

2) 컬렉션

컬렉션	설명	r/w
images	문서 내 모든 <img> 객체들의 컬렉션	r
links	문서 내의 href 속성을 가진 모든 링크 객체(<a>나 <area>)들의 컬렉션	r
forms	문서 내의 모든 폼<form> 객체들의 컬렉션	r

3) 메소드

메소드	설명
getElementsByTagName()	주어진 태그 이름을 가진 모든 태그(DOM 객체)의 컬렉션 리턴
getElementsByClassName()	주어진 class 속성 값을 가진 모든 태그(DOM 객체)의 컬렉션 리턴
getElementsByName()	주어진 name 속성 값을 가진 모든 태그(DOM 객체)의 컬렉션 리턴
getElementById()	주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴
addEventListener()	document 객체에 이벤트 리스너 등록
close()	document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더 이상 쓰기를 받지 않음
createElement()	HTML 태그의 동적 생성
open()	document에 담긴 콘텐츠를 모두 지우고, 새로운 HTML 콘텐츠를 쓸 수 있도록 열기
removeEventListener()	document 객체에 등록된 이벤트 리스너 제거
write()	document에 HTML 콘텐츠 삽입. DOM 트리에 연결되고 브라우저에 출력됨
writeln()	write() 후 '\n' 추가 출력.  브라우저는 '\n'을 공백 문자 한 개로 처리하므로 한 칸 띄는 효과 밖에 없음. 한 줄을 띄려면 document.write("<br>"); 라고 해야 한다.

 

3. 주요 메소드

1) getElementsByTagName() : 태그 이름으로 DOM 객체 찾기

- 이 메소드를 호출하면 동일한 HTML 태그 이름을 가진 DOM 객체들을 모두 찾아 컬렉션을 만들어 리턴한다

- 컬렉션은 []와 인덱스를 이용하여 각 원소를 접근할 수 있다.

var divTags = document.getElementsByTagName("div");
var n = divTags.length; // 웹 페이지에 있는 <div> 태그의 개수

2) getElementsByClassName() : class 속성으로 DOM 객체 찾기

- 이 메소드는 동일한 class 이름을 가진 모든 DOM 객체를 찾아 컬렉션 형태로 리턴한다.

- getElementsByClassName() 함수로 접근한 DOM 요소 중 1개의 요소에만 접근하고 싶을 수도 있다.

 --> 그럴 때에는 배열처럼 접근하면 된다. 예) document.getElementsByClassName("plain")[0]

<div class="plain">...</div>
<div class="important">...</div>
<div class="plain">...</div>

var plainClasses = document.getElementsByClassName("plain");
var n = plainClasses.length;  // 웹 페이지에 class="plain" 속성을 가진 태그 개수, 2

 

3) document.write()와 document.writeln()

- document.write() 사용 시 주의할 점

 HTML 문서가 로드되어 출력이 모두 이루어지고 나면 document 객체가 닫히기 때문에, 더 이상 HTML 텍스트를 추가로 출력할 수 없음

 document 객체가 닫힌 후 document.write()가 실행되면, 브라우저는 document 객체에 담긴 현재 문서를 지우고 빈 document를 새로 연다. 

그러므로 HTML 문서가 완전히 로드된 후 document.write()가 실행된다면, 현재 HTML 문서가 지워지고 새 문서가 작성되는 결과가 되고 말 것임

 

4) open() , close () - document의 열기와 닫기

- 현재 브라우저 윈도우에 출력된 HTML 텍스트를 지워버리고 새로운 내용을 출력하려면

document.open()을 호출하여 document 객체를 열고 -> document.write()로 HTML 텍스트를 쓰고 -> document.close()로 호출되어 document 객체를 닫는다

- '열기' 는 document 객체에 만들어진 현재 HTML 텍스트를 모두 지우고 새로운 HTML 텍스트를 받아들일 준비를 하는 것이다.