시작 오늘 분석할 코드
이번 코드는 document 객체가 가진 주요 프로퍼티 12가지를 한 번에 alert()로 뽑아 보여준다. 핵심은 이 프로퍼티들을 언제 읽느냐다 — body의 onload 이벤트가 걸리기 전과 후, 값이 달라지는 프로퍼티가 있기 때문이다.
<!DOCTYPE html> <html> <head id="myHead"> <meta charset="UTF-8"> <title>document 객체의 주요 프로퍼티</title> <script> let text = "문서 로딩 중일 때 readyState = " + document.readyState + "\n"; </script> </head> <body style="background-color:yellow; color:blue; direction:rtl" onload="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>
실제 출력 미리보기
onload가 걸리면 printProperties()가 실행되고, 아래와 같은 alert 창이 뜬다. (아래는 실제 브라우저 alert 창을 흉내 낸 화면이다.)
이 페이지 내용:
1. location =http://example.com/doc-prop.html 2. URL =http://example.com/doc-prop.html 3. title =document 객체의 주요 프로퍼티 4. head의 id =myHead 5. body color =blue 6. domain =example.com 7. lastModified =07/03/2026 10:20:11 8. defaultView = [object Window] 9. 문서의 로드 완료 후 readyState = complete 10. referrer = 11. activeElement =여기 포커스가 있습니다 12. documentElement의 태그 이름 = HTML
확인
※ 10번 referrer가 빈 문자열인 이유는 이 페이지를 주소창에 직접 입력해서 열었기 때문이다. 다른 페이지의 링크를 클릭해서 들어왔다면 그 이전 페이지 URL이 찍힌다.
용어 용어 정리
document현재 열린 HTML 문서 전체를 나타내는 객체. DOM의 시작점
readyState문서가 로딩된 단계 (loading → interactive → complete)
onload문서(및 이미지 등)가 완전히 로드된 후 실행되는 이벤트
location현재 페이지 주소 정보를 담은 객체 (Location)
URL현재 페이지 주소를 담은 순수 문자열
referrer이 페이지로 들어오기 직전에 있던 페이지의 주소
activeElement현재 포커스(커서)를 가진 요소
documentElement문서의 최상위 요소, 즉 <html> 태그 자체
focus()특정 요소에 강제로 포커스(커서)를 이동시키는 메소드
lastModified이 문서가 마지막으로 수정된 날짜/시간 문자열
1 document 객체란 무엇인가
왜 document라는 객체가 필요한가?
브라우저는 HTML 파일을 읽으면 그것을 그냥 텍스트로 두지 않는다. 태그 하나하나를 객체(object)로 바꿔서 트리 구조로 메모리에 쌓아 올리는데, 이걸 DOM(Document Object Model)이라 부른다. document는 그 트리 전체를 대표하는 최상위 진입점이다. 즉 document.title, document.body처럼 점(.)을 찍어 들어가는 모든 프로퍼티는 결국 "이 HTML 문서의 어떤 부분을 가리키는가"에 대한 질문이다.
※ HTML을 텍스트가 아니라 객체 트리로 생각하면, "왜 document.body.style.color처럼 계속 점을 찍어야 하나"가 이해된다 — document → body → style → color 순으로 트리를 타고 내려가는 것이다.
2 onload가 필요한 이유
스크립트를 아무 데나 실행하면 왜 안 되는가?
브라우저는 HTML을 위에서 아래로 순서대로 읽는다. 만약 <input id="input"> 태그가 나오기도 전에 document.getElementById("input")을 호출하면, 그 시점에는 그런 요소가 아직 DOM에 존재하지 않아서 null이 반환되고 .focus()를 호출하는 순간 오류가 난다.
이 코드가 <script>를 body 하단에 두고, 게다가 실제 실행은 <body onload="printProperties()">로 미룬 이유가 여기에 있다. onload는 문서의 모든 요소와 리소스(이미지 등)까지 다 불러온 다음에야 발생하는 이벤트이므로, 그 안에서는 어떤 요소를 찾아도 100% 존재가 보장된다.
※ onload 없이 head의 <script>에서 곧바로 document.getElementById("input").focus()를 실행하면 "Cannot read properties of null" 오류가 난다 — input 태그가 아직 만들어지기 전이기 때문이다.
3 readyState — 로딩 단계를 숫자가 아니라 문자열로
왜 이 코드에 readyState가 두 번 등장하는가?
document.readyState는 문서가 지금 어느 단계인지를 알려주는 프로퍼티로, 값은 "loading" → "interactive" → "complete" 순서로 바뀐다. 이 코드는 head의 <script>에서 한 번, onload 안(문서가 다 로드된 뒤)에서 또 한 번 읽는다 — 같은 프로퍼티인데 시점에 따라 다른 값이 나오는 것을 직접 눈으로 확인시키려는 의도다.
loading
→
interactive
→
complete
head의 <script> 실행 시점 → readyState = "loading" (아직 body를 읽는 중) body onload 실행 시점 → readyState = "complete" (모든 리소스 로드 끝)
4 location vs URL — 객체냐 문자열이냐
둘 다 주소를 담고 있는데 왜 따로 있는가?
document.URL은 현재 페이지 주소를 담은 순수 문자열이다. 반면 document.location은 Location이라는 객체로, 주소 하나만 담는 게 아니라 .protocol, .host, .pathname, .search 같은 세부 조각까지 함께 들고 있다. 이 코드처럼 + document.location으로 문자열과 더하면 객체가 자동으로 toString()되어 URL 문자열처럼 보이지만, 실제로는 훨씬 더 많은 정보를 가진 객체다.
document.URL
문자열 하나
예: "http://a.com/x.html"
더 이상 쪼갤 수 없음
document.location
Location 객체
.href, .protocol, .host,
.pathname 등 세부 접근 가능
※ 주소를 바꿔서 페이지를 이동시키고 싶다면 document.URL은 읽기 전용이라 불가능하고, document.location.href = "새주소"처럼 location 객체에 대입해야 한다.
5 title · head · body — 문서의 세 조각에 바로 접근
왜 getElementById 없이 바로 document.title인가?
보통 요소에 접근하려면 document.getElementById(...)처럼 검색을 거쳐야 하지만, title·head·body는 문서마다 딱 하나씩만 존재하는 필수 태그이기 때문에 브라우저가 지름길 프로퍼티를 따로 만들어 두었다. document.head.id처럼 head 태그의 속성에 바로 접근할 수 있고, document.body.style.color처럼 body에 적용된 인라인 스타일도 바로 읽을 수 있다.
document.title → "document 객체의 주요 프로퍼티" (문자열, 수정도 가능) document.head.id → "myHead" (head 태그의 id 속성값) document.body.style.color → "blue" (body 인라인 style의 color값)
※ document.title = "새 제목"처럼 대입하면 브라우저 탭 제목이 실시간으로 바뀐다. title은 읽기 전용이 아니다.
6 lastModified · referrer · domain · defaultView
이 넷은 "문서 자체"가 아니라 "문서를 둘러싼 정보"
앞의 프로퍼티들이 문서 안쪽 구조를 가리켰다면, 이 네 가지는 문서가 어떤 환경에서 열렸는지를 알려준다.
| 프로퍼티 |
의미 |
lastModified |
서버가 응답 헤더로 알려준 "마지막 수정 시각" 문자열 |
referrer |
이 페이지로 오기 직전에 있던 페이지 주소. 직접 입력·즐겨찾기로 오면 빈 문자열 |
domain |
현재 주소의 도메인 부분만 (예: "example.com") |
defaultView |
이 문서를 담고 있는 window 객체 자체를 되돌려줌 |
※ referrer가 빈 문자열이면 흔히 "값이 안 나온다"고 오해하지만, 실제로는 정상 동작이다 — 이전 페이지가 없었을 뿐이다.
7 activeElement · documentElement · focus()
"지금 커서가 어디 있는가"를 코드로 확인하기
document.activeElement는 현재 포커스(커서)를 가진 요소를 되돌려준다. 이 코드는 printProperties() 맨 첫 줄에서 document.getElementById("input").focus()로 먼저 input에 포커스를 강제로 옮긴 다음 activeElement를 읽는다 — 순서를 바꾸면 activeElement는 input이 아니라 body가 나온다.
document.documentElement는 문서의 가장 바깥쪽, 즉 <html> 태그 자체를 가리킨다. .tagName을 붙이면 태그 이름이 대문자 문자열 "HTML"로 나온다.
1
focus() 호출input 요소에 커서를 강제로 이동
2
activeElement 읽기방금 포커스를 준 input 요소가 반환됨
3
.value 접근activeElement가 input이므로 입력값(value)까지 바로 읽을 수 있음
※ focus()를 먼저 호출하지 않고 activeElement를 읽으면 기본값인 body(또는 html)가 나오고, body에는 .value가 없어 undefined가 찍힌다.
8 자주 하는 실수
| 실수 |
증상 |
해결 |
| onload 없이 head에서 body 요소 접근 |
"Cannot read properties of null" 오류 |
onload 안에서 실행하거나 script를 body 맨 아래에 배치 |
| readyState가 하나만 있다고 오해 |
"loading" 값만 보고 문서가 안 끝났다고 착각 |
같은 프로퍼티라도 읽는 시점에 따라 값이 바뀐다는 것 이해 |
| referrer가 빈 문자열이면 버그로 착각 |
referrer = "" 를 보고 코드 오류라 생각 |
직접 입력·새 탭으로 열면 원래 빈 문자열이 정상 |
| focus() 전에 activeElement를 읽음 |
원하는 요소가 아니라 body가 반환됨 |
focus()를 먼저 호출한 뒤 activeElement 확인 |
| document.URL을 객체처럼 다뤄 .protocol 접근 시도 |
undefined 반환 |
세부 속성이 필요하면 document.location 사용 |
핵심 한 줄 요약
documentHTML 문서 전체를 대표하는 객체, DOM의 시작점
onload모든 요소·리소스가 로드된 후 실행 — 안전하게 요소 접근 가능
readyStateloading → interactive → complete, 읽는 시점마다 값이 다름
location vs URLlocation=세부 접근 가능한 객체, URL=문자열 하나
title / head / body문서마다 하나뿐이라 검색 없이 바로 접근 가능
referrer직전 페이지 주소, 직접 입력 시 빈 문자열이 정상
activeElement현재 포커스 가진 요소 — focus() 호출 순서가 중요
documentElement<html> 태그 자체를 가리키는 최상위 요소
Tags
#JavaScript #document객체 #DOM #location #URL #readyState #onload #focus #title #referrer #activeElement #documentElement #자바스크립트기초 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, document객체, DOM, location, URL, readyState, onload, focus, title, referrer, activeElement, documentElement, 자바스크립트기초, 웹개발, 티스토리
왕진 블로그
댓글