예제 8-5. document 객체의 프로퍼티 출력
WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 11:05 |3. document 객체
document 개요
document는 DOM 트리의 최상위 객체이다. 브라우저는 HTML 문서를 로드라기 전에 document 객체를 먼저 만든다.
그리고 document 객체를 뿌리로 하여 DOM 트리를 만든다.
document 객체는 이름 그대로 HTML 문서 전체를 대변하는 객체이며, 모든 DOM 객체를 접근하는 경로의 시작점이다.
document 객체는 많은 프로퍼티를 통해 HTML 문서의 전반적인 속성을 나타내고
document 객체의 주요 프로퍼티, 컬렉션, 메소드
(프로퍼티)
location // 현대 문서의 URL 정보를 간진 location 객체의 레퍼런스
domain // 서버의 도메인 이름
referrer // 이 HTML 문서를 로드한 원래 문서의 URL 문자열. 이 문서가 처음이면 빈 문자열
cookie // 쿠키에 대한 레퍼런스
lastModified // "MM/DD/YYYY hhmmss" 형식. 문서의 최근 수정 시간
readyState // 문서의 현재 로딩 상태를 나타내는 문자열. 로딩되는 동안 "loading", "interactive", "complete" 순으로 변함
"interactive"는 문서의 파싱(해독)이 끝난 상태로, 여전히 로딩중. 이때 사용자는 보이는 폼요소에 입력가능.
문서가 완전히 화면에 출력되면 "complete"로 변경
title // 문서의 제목 문자열. <tile> 태그가 없으면 빈 문자열
body // body 객체에 대한 레퍼런스
head // head 객체에 대한 레퍼런스
defaultView // 문서가 출력된 브라우저 윈도우(window)에 대한 레퍼런스
activElement // 문서가 포커스를 받을 때 문서내 포커스를 받는 자식 객체
documentElement // html 객체에 대한 레퍼런스
URL // 현재 문서의 URL
(컬렉션)
images // 문서 내의 모든 <img> 객체들의 컬렉션
links // 문서 내의 href 속성을 가진 모든 링크 객체(<a>나 <area>)들의 컬렉션
forms // 문서 내의 모든 폼 <form> 객체들의 컬렉션
(메소드)
getElementByTagName() // 주어진 태그 이름을 가진 모든 태그 (DOM 객체)의 컬렉션 리턴
getElementByClassName() // 주어진 class 속성 값을 가진 모든 태그 (DOM 객체)의 컬렉션 리턴
getElementByName() // 주어진 name 속성 값을 가진 모든 태그 (DOM 객체)의 컬렉션 리턴
getElementById() // 주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴
addEventListener() // document 객체에 이벤트 리스너 등록
close() // document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더 이상 쓰기를 받지 않음.
createElement() // HTML 태그의 동적 생성
open() // document에 담긴 콘텐츠를 모두 지우고, 새로운 HTML 콘텐츠를 쓸 수 있도록 열기
removeEventListener() / document 객체에 등록된 이벤트 리스너 제거
write() // document에 HTML 콘텐츠 삽입. DOM 트리에 연결되고 브라우저에 출력됨
writeIn() // write() 후 '\n' 추가 출력. '\n'의 효과는 빈칸 하나에 불가
예제 8-5. document 객체의 프로퍼티 출력
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head id="myHead"> <meta charset="UTF-8"> <title>document 객체의 주요 프로퍼티</title> <script> var text = "문서 로딩 중일 때 readyState = " + document.readyState + "\n"; </script> </head> <body style="background-color:yellow; color:blue; direction:rtl" // 오른쪽에 붙여서 문서 출력 지시 onload="printProperties()"> // 문서의 로딩이 완료되면 printProperties()함수 호출 <h3>document의 주요 프로퍼티</h3> <hr> <a href="http://www.naver.com">네이버 홈페이지</a> <div>이곳은 div 영역입니다.</div> <input id="input" type="text" value="여기 포커스가 있습니다"> <script> // 문서가 완전히 로드(출력)되었을 때, 현재 document의 프로퍼티 출력 function printProperties() { document.getElementById("input").focus(); // <input> 태그에 포커스를 줌 text += "1. location =" + document.location + "\n"; text += "2. URL =" + document.URL + "\n"; text += "3. title =" + document.title + "\n"; text += "4. head의 id =" + document.head.id + "\n"; text += "5. body color =" + document.body.style.color + "\n"; text += "6. domain =" + document.domain + "\n";; text += "7. lastModified =" + document.lastModified + "\n"; text += "8. defaultView = " + document.defaultView + "\n"; text += "9. 문서의 로드 완료 후 readyState = " + document.readyState + "\n"; text += "10. referrer = " + document.referrer + "\n"; text += "11. activeElement = " + document.activeElement.value + "\n"; text += "12. documentElement의 태그 이름 = " + document.documentElement.tagName + "\n"; alert(text); } </script> </body> </html> | cs |
로드 후 경고창 출력
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-7. write()와 writeIn()활용 (0) | 2017.10.31 |
|---|---|
| 예제 8-6. 태그 이름을 DOM 객체 찾기, getElementsByTagName() (0) | 2017.10.31 |
| 예제 8-4. this 활용 (0) | 2017.10.30 |
| 예제 8-3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경 (0) | 2017.10.30 |
| 예제 8-2. 자바스크립트로 <span>태그의 CSS3 스타일 동적 변경 (0) | 2017.10.30 |