Document

 

각각의 웹 페이지는 자신의 문서(document) 객체를 갖는다. Document 인터페이스는 웹 페이지의 컨텐츠(DOM 트리, 즉 <body> 또는 <table>와 같은 요소(Element) 등)에 대한 진입점으로서의 역할을 하며, 또한 해당 문서에 대한 전역 기능(페이지의 URL 가져오기, 문서 내에 새 요소 생성하기 등)을 제공한다.

문서 객체는 다음과 같은 여러 API를 통해 얻을 수 있다.

  • 가장 일반적인 방법으로는 문서 내 실행되는 스크립트(script)에서 document를 사용한다. (같은 문서 객체를 다음과 같이 지칭할 수도 있다.  window.document)
  • iframe의 contentDocument 프로퍼티를 사용하여 그 iframe에 속한 문서 객체를 얻는다.
  • XMLHttpRequest 객체의 responseXML사용한다.
  • 어떤 노드나 요소가 속한 문서를 가리키기 위해 노드의 ownerDocument 프로퍼티를 사용한다.

문서의 종류에 따라 (예 : HTML or XML) 그 문서 객체에서 사용 가능한 API는 달라질 수 있다.

  • 모든 문서 객체는 Document 인터페이스를 구현한다. (또한 그에 따라 Node 와 EventTarget 인터페이스 역시 구현한다). 따라서 이 페이지에 나열된 "핵심적인" 프로퍼티와 메소드는 모든 종류의 문서 객체에서 사용 가능하다.
  • 현 시점의 브라우저들에서 어떤 문서는 (예 : text/html content type으로 제공되는 것 등) HTMLDocument 인터페이스도 구현한다.
  • 현 시점의 브라우저들에서 SVG 문서는 SVGDocument 인터페이스를 구현한다.

향후에는 위와 같은 인터페이스들이 모두 Document 인터페이스로 통합될 것이다.

프로퍼티

참고 : Document 인터페이스는 Node 와 EventTarget 인터페이스로부터 상속받는다.

Document.all
어떤 id를 갖는 모든 요소를 넘겨준다. 이것은 레거시 비표준 인터페이스이므로 이것 대신 Document.getElementById() 메소드를 사용하여야 한다.
Document.async
document.load가 동기 요청인지 비동기 요청인지를 가리킨다.
Document.characterSet
문서에서 사용하는 문자셋을 반환한다.
Document.compatMode
문서가 Quirks 와 Strict 중 어느 모드에서 렌더링되는 것인지 가리킨다.
Document.contentType
현재 문서의 MIME 헤더 Content-Type을 반환한다.
Document.doctype
현재 문서의 문서형식정의(DTD : Document Type Definition)를 반환한다.
Document.documentElement
문서 객체의 자식에 해당하는 요소를 반환한다. HTML문서일 경우 일반적으로 HTML 요소가 된다.
Document.documentURI
문서 URL을 반환한다.
Document.domConfig
DOMConfiguration 객체를 반환해야 한다.
Document.implementation
현재 문서에 대한 DOM implementation을 반환한다.
Document.inputEncoding
문서를 파싱할 때 쓴 인코딩을 반환한다.
Document.lastStyleSheetSet
마지막에 활성화된 스타일 시트 셋을 반환한다. selectedStyleSheetSet 값을 세팅하면서 스타일 시트가 변경될 때까지 null값을 갖는다.
Document.mozSyntheticDocument
문서가 synthetic, 즉 단독 이미지, 비디오, 오디오 파일 또는 그와 비슷한 것일 경우 true를 반환한다.
Document.mozFullScreen
문서가 전체화면 모드 일 경우 true를 반환한다.
Document.mozFullScreenElement
이 문서에서 현재 전체화면 모드인 요소를 반환한다.
Document.mozFullScreenEnabled
  현재 문서에서 element.mozRequestFullscreen() 호출이 성공한다면 true를 반환
Document.pointerLockElement
마우스 포인터가 잠겨있을 때(lock) 마우스 이벤트에 대한 타겟이 되는 요소 셋을 반환한다. 잠김이 대기상태(pending)이거나, 포인터가 잠기지 않은 상태이거나, 타겟이 다른 문서 내에 있는 경우 null을 반환한다.
Document.preferredStyleSheetSet
페이지 author가 지정한 선호(preffered) 스타일 시트를 반환한다.
Document.selectedStyleSheetSet
현재 사용하고 있는 스타일 시트 셋을 반환한다.
Document.styleSheets
현재 문서의 스타일 시트 객체 목록을 반환한다.
Document.styleSheetSets
현재 문서에서 사용 가능한 스타일 시트 셋 목록을 반환한다.
Document.xmlEncoding
XML 선언에서 정한 인코딩을 반환한다.
Document.xmlStandalone 안씀 Gecko 10.0
XML 선언에서 현재 문서가 단독적(standalone)이라고 명시한 경우( 예 : DTD의 외부 부분은 문서의 컨텐츠에 영향을 준다) true를 반환하며, 그렇지 않다면 false를 반환한다.
Document.xmlVersion 안씀 Gecko 10.0
XML 선언에서 명시된 버전값을 반환한다. 만약 명시되어 있지 않은 경우 "1.0"을 반환한다.

Document 인터페이스는 ParentNode 인터페이스로부터 상속받는다. 해당 인터페이스의 프로퍼티는 다음을 참조 : 

ParentNode.children Read only
Returns a live HTMLCollection containing all objects of type Element that are children of this ParentNode.
ParentNode.firstElementChild Read only
Returns the Element that is the first child of this ParentNode, or null if there is none.
ParentNode.lastElementChild Read only
Returns the Element that is the last child of this ParentNode, or null if there is none.
ParentNode.childElementCount Read only
Returns an unsigned long giving the amount of children that the object has.

HTML 문서로서의 확장

HTML 문서를 위한 Document 인터페이스는 HTMLDocument 인터페이스로부터 상속받거나 (HTML5의 경우) HTML 문서로 확장된다.

Document.activeElement
현재 포커스된 요소를 반환한다.
Document.alinkColor
문서 본문(body) 내의 활성 링크 색상 셋을 반환한다.
Document.anchors
문서 내의 모든 앵커 목록을 반환한다.
Document.applets
문서 내의 애플릿에 대한 순서화 목록을 반환한다.
Document.bgColor
현재 문서의 배경색을 조회/변경(get/set)한다.
Document.body
현재 문서의 <body> 요소를 반환한다.
Document.cookie
세미콜론으로 구분된 이 문서의 쿠키 목록을 반환하거나 문서에 쿠키 하나를 지정(set)한다.
Document.defaultView
창(window) 객체에 대한 참조를 반환한다.
Document.designMode
전체 문서에 대한 편집 가능/불가 여부를 조회/변경(get/set)한다.
Document.dir
문서의 쓰기 방향(ltr : 오른쪽에서 왼쪽, rtl : 왼쪽에서 오른쪽)을 조회/변경(get/set)한다.
Document.domain
현재 문서의 도메인을 반환한다.
Document.embeds
현재 문서에서 임베드된 <embed> 요소의 목록을 반환한다
Document.fgColor
현재 문서의 전경색, 글자색을 조회/변경(get/set)한다.
Document.forms
현재 문서의 <form> 요소의 목록을 반환한다.
Document.head
현재 문서의 <head> 요소를 반환한다.
Document.height
현재 문서의 높이(height)를 조회/변경(get/set)한다.
Document.images
현재 문서 내 이미지의 목록을 반환한다.
Document.lastModified
문서가 마지막으로 수정된 일시를 반환한다.
Document.linkColor
문서 내 하이퍼링크의 색상을 조회/변경(get/set)한다.
Document.links
문서 내 모든 하이퍼링크의 목록을 반환한다.
Document.location
현재 문서의 URI를 반환한다.
Document.plugins
사용 가능한 플러그인 목록을 반환한다.
Document.readyState
문서의 로딩 상태를 반환한다.
Document.referrer
이 페이지로 링크된 페이지의 URI를 반환한다.
Document.scripts
문서의 모든 <script> 요소를 반환한다.
Document.title
현재 문서의 제목(title)을 반환한다.
Document.URL
현재 문서의 URL을 나타내는 문자열을 반환한다.
Document.vlinkColor
이미 방문한 하이퍼링크의 색상을 조회/변경(get/set)한다.
Document.width
현재 문서의 너비(width)를 반환한다.

이벤트 핸들러

Document.onpointerlockchange
pointerlockchange 이벤트에 대한 이벤트 처리(handling) 코드를 반환한다.
Document.onpointerlockerror
pointerlockerror 이벤트에 대한 이벤트 처리(handling) 코드를 반환한다.
Document.onreadystatechange
readystatechange 이벤트에 대한 이벤트 처리(handling) 코드를 반환한다.

메소드

참고 : Document 인터페이스는 Node 와 EventTarget 인터페이스로부터 상속받는다. 

Document.adoptNode(Node node)
외부 문서에서 노드(node)를 취한다(adopt).
Document.captureEvents(String eventName)
window.captureEvents 참조
Document.caretPositionFromPoint(Number x, Number y)
지정한 좌표 또는 그와 가까운 위치의 CaretPosition을 조회한다(get).
document.caretRangeFromPoint(Number x, Number y)
지정된 좌표의 문서 조각(fragment) 에서 Range 객체를 조회한다(get).
Document.createAttribute(String name)
새로운 Attr 객체를 생성하고 이를 반환한다.
Document.createAttributeNS(String namespace, String name)
주어진 네임스페이스에서 새 애트리뷰트 노드(attribute node)를 생성하고 이를 반환한다.
Document.createCDATASection(String data)
새 CDATA 노드 를 생성하고 이를 반환한다.
Document.createComment(String comment)
새 주석 노드(comment node)를 생성하고 이를 반환한다.
Document.createDocumentFragment()
새 문서 조각(fragment)을 생성하고 이를 반환한다.
Document.createElement(String name)
주어진 태그명으로 새 요소를 생성하고 이를 반환한다.
Document.createElementNS(String namespace, String name)
주어진 태그명과 네임스페이스 URI로 새 요소를 생성하고 이를 반환한다.
Document.createEntityReference(String name)
새 개체 참조 객체(entity reference object)를 생성하고 이를 반환한다.
Document.createEvent(String interface)
새 이벤트 객체를 생성하고 이를 반환한다.
Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])
NodeIterator 객체를 생성하고 이를 반환한다.
Document.createProcessingInstruction(String target, String data)
ProcessingInstruction 객체를 생성하고 이를 반환한다.
Document.createRange()
Range 객체를 생성하고 이를 반환한다.
Document.createTextNode(String text)
텍스트 노드(text node)를 생성하여 이를 반환한다.
Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])
TreeWalker 객체를 생성하고 이를 반환한다.
Document.elementFromPoint(Number x, Number y)
지정된 좌표에서 보이는 요소를 반환한다.
Document.enableStyleSheetsForSet(String name)
지정된 스타일 시트 셋으로 스타일 시트를 활성화한다.
Document.exitPointerLock()
포인터 잠금(lock)을 해제한다.
Document.getElementsByClassName(String className)
주어진 클래스명을 갖는 요소의 목록을 반환한다.
Document.getElementsByTagName(String tagName)
주어진 태그명을 갖는 요소의 목록을 반환한다.
Document.getElementsByTagNameNS(String namespace, String tagName)
주어진 태그명과 네임스페이스(namespace)를 갖는 요소의 목록을 반환한다.
Document.importNode(Node node, Boolean deep)
외부 문서의 노드 하나를 복제(clone)하여 반환한다.
document.normalizeDocument()
개체 교체, 텍스트 노드 정규화 등
Document.releaseCapture()
현재 마우스 캡쳐(mouse capture)가 이 문서의 요소 위에 있을 경우, 해당 마우스 캡처를 해제(release)한다.
Document.releaseEvents
window.releaseEvents 참조.
document.routeEvent 안씀 Gecko 24
window.routeEvent 참조.
document.mozSetImageElement
배경 이미지로 사용하는 요소를 지정한 요소 ID로 변경할 수 있도록 한다.

Document 인터페이스는 ParentNode 인터페이스로 확장(extend)된다 :

Document.getElementById(String id)
해당 id 요소에 대한 객체 참조를 반환한다.
Document.querySelector(String selector)
문서 내에 지정한 선택자(selector)에 부합(match)하는 문서 순서상 첫번째 요소 노드를 반환한다.
Document.querySelectorAll(String selector)
문서 내에 지정한 선택자(selector)에 부합(match)하는 요소 노드 전체의 목록을 반환한다.

Document 인터페이스는 XPathEvaluator 인터페이스로 확장된다 :

Document.createExpression(String expression, XPathNSResolver resolver)
XPathExpression을 컴파일한다. (그렇게 함으로써 이후 반복적으로 연산(evaluation)에 사용할 수 있다.)
Document.createNSResolver(Node resolver)
XPathNSResolver 객체 하나를 생성한다.
Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)
XPath expression을 연산(evaluation)한다.

HTML 문서로의 확장

HTML 문서를 위한 Document 인터페이스는 HTMLDocument 인터페이스로부터 상속받거나 (HTML5의 경우) HTML 문서로 확장된다.

Document.clear()
인터넷 익스플로러 최근 버전을 포함한 현 시점 주류 브라우저에서 이 메소드는 아무 기능을 하지 않는다.
Document.close()
문서의 쓰기(writing) 스트림(stream)을 닫는다(close).
Document.execCommand(String command[, Boolean showUI[, String value]])
편집가능(editable) 문서에서 포맷팅 명령(formating command)를 실행한다.
Document.getElementsByName(String name)
주어진 이름을 가진 요소의 목록을 반환한다.
Document.getSelection()
문서에서 선택된 텍스트에 연관된 Selection 객체를 반환한다.
Document.hasFocus()
문서 내 어딘가에 포커스(focus)가 위치해있는 경우 true를 반환한다.
Document.open()
문서의 쓰기(writing) 스트림(stream)을 연다(open).
Document.queryCommandEnabled(String command)
현재 범위(range)에서 포맷팅 명령(formating command)을 실행할 수 있다면 true를 반환한다.
Document.queryCommandIndeterm(String command)
현재 범위(range)에서 포맷팅 명령(formating command)이 불확정 상태(indeterminate state)인 경우 true를 반환한다.
Document.queryCommandState(String command)
현재 범위(range)에서 포맷팅 명령(formating command)을 실행했다면 true를 반환한다.
Document.queryCommandSupported(String command)
현재 범위(range)에서 포맷팅 명령(formating command)을 지원한다면 true를 반환한다.
Document.queryCommandValue(String command)
포맷팅 명령(formating command)의 현재 범위(range)의 현재값(current value)를 반환한다.
Document.registerElement(String tagname[, Object options])
브라우저에 새 커스텀 요소를 등록(register)하고 이 요소에 대한 생성자(constructor)를 반환한다.
Document.write(String text)
문서에 텍스트를 쓴다(write).
Document.writeln(String text)
문서에 텍스트 한 줄을 쓴다(write).

명세

Specification Status Comment
Document Object Model (DOM) Level 1 Specification
The definition of 'Document' in that specification.
Recommendation Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification
The definition of 'Document' in that specification.
Recommendation Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification
The definition of 'Document' in that specification.
Recommendation Supersede DOM 2
DOM
The definition of 'Document' in that specification.
Living Standard Intend to supersede DOM 3
WHATWG HTML Living Standard
The definition of 'Document' in that specification.
Living Standard Turn the HTMLDocument interface into a Document extension.
Document Object Model (DOM) Level 3 XPath Specification
The definition of 'XPathEvaluator' in that specification.
Recommendation Define the XPathEvaluator interface which extend Document.
HTML Editing APIs
The definition of 'Document' in that specification.
Editor's Draft Extend the Document interface
CSS Object Model (CSSOM) View Module
The definition of 'Document' in that specification.
Working Draft Extend the Document interface
CSS Object Model (CSSOM)
The definition of 'Document' in that specification.
Working Draft Extend the Document interface
Pointer Lock
The definition of 'Document' in that specification.
Candidate Recommendation Extend the Document interface

브라우저 호환성

파이어폭스 참고

모질라에서 정의한 XUL 컨텐츠만을 위한 비표준 프로퍼티가 몇 개 존재한다 :

document.currentScript
현재 실행중인 <script> 요소를 반환한다.
document.documentURIObject
(모질라 애드온에서만 가능) 문서의 URI를 나타내는 nsIURI 객체를 반환한다. 이 프로퍼티는 특권(privileged) 자바스크립트 코드(UniversalXPConnect 특권)에서만 특별한 의미를 갖는다.
document.popupNode
팝업이 불려진(invoked) 노드를 반환한다.
document.tooltipNode
현재 툴팁의 타겟이 되는 노드를 반환한다.

모질라에서 정의한 비표준 메소드 또한 존재한다 :

Document.execCommandShowHelp 안씀 Gecko 14.0
이 메소드는 예외(exception)를 투척(throw)하는 것 이외에는 아무 기능을 하지 않으며, Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) 부터는 삭제되었다.
Document.getBoxObjectFor
Element.getBoundingClientRect() 메소드를 대신 사용하도록 하자.
Document.loadOverlay
XUL overlay 를 동적으로 로드(load)한다. XUL 문서에서만 작동한다.
document.queryCommandText 안씀 Gecko 14.0
이 메소드는 예외(exception)를 투척(throw)하는 것 이외에는 아무 기능을 하지 않으며, Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11) 부터는 삭제되었다.

인터넷 익스플로러 참고

마이크로소프트에서 정의한 비표준 프로퍼티가 몇 개 존재한다.

document.fileSize*
문서의 크기를 바이트로 반환한다. 인터넷 익스플로러 11을 시작으로 이 프로퍼티는 더 이상 지원되지 않는다. MSDN을 참조.
인터넷 익스플로러는 Document 인터페이스 내에서 Node 인터페이스의 모든 메소드를 지원하지는 않는데, 다음과 같다 :
document.contains
다른 방편으로 document.body.contains()를 사용할 수 있다.

 

문서 태그 및 공헌자

태그: 
Contributors to this page: PineMt, teoli, fscholz, khalid32, 권지웅
최종 변경: PineMt,
사이드바 숨기기