document 노드 개요

HTMLDocument 생성자(document로부터 상속됨)는 DOM 내에 DOCUMENT_NODE(예: window.document)를 생성.

HTMLDocument의 속성 및 메서드(상속된 것 포함)

//document 고유 속성
console.log(Object.keys(document).sort());

//document 고유 속성 및 상속받은 속성
var documentPropertiesIncludeInherited = [];
for (var p in document) {
    documentPropertiesIncludeInherited.push(p);
}
console.log(documentPropertiesIncludeInherited.sort());

//documment가 상속받은 속성만
var documentPropertiesOnlyInherited = [];
for (var p in document) {
    if (!document.hasOwnProperty(p)) {
        documentPropertiesOnlyInherited.push(p);
    }
}
console.log(documentPropertiesOnlyInherited.sort());

※ HTMLDocument 노드 개체(예:window.document)는 DOM를 다룰 때 사용 가능한 수 많은 메서드와 속성(예: document.querySelectorAll())에 접근하는 데 사용된다.

일반적인 HTML문서 정보 얻기

  • document.title – 제목
  • document.URL – url
  • document.referrer – reffer
  • document.lastModified – 최종 수정일
  • document.compatMode – 호환 모드
var d = document;
console.log('title = ' +d.title);
console.log('url = ' +d.URL);
console.log('referrer = ' +d.referrer);
console.log('lastModified = ' +d.lastModified);

//Backcompat(Quirks 모드) 또는 CSS1Compat(Strict 모드) 중 하나가 출력.
console.log('compatibility mode = ' + d.compatMode);

document 자식노드

document.childNodes

//doctye/DTD
DOCUMENT_TYPE_NODE를 의미하는 숫자 키 10이 출력
console.log(document.childNodes[0].nodeType);


//<html> element
ELEMENT_TYPE_NODE를 의미하는 숫자 키 1이 출력
console.log(document.childNodes[1].nodeType);

window.document가 DOM 인터페이스의 시작점이라는거 기억

바로가기 제공

document는 <!DOCTYPE>, <html lang="ko">, <head>, <body>에 바로가기가 가능하다.

  • document.doctype은 <!DOCTYPE>을 참조한다.
  • document.documentElement는 <html lang=”ko”>을 참조한다.
  • document.head는 <head>를 참조한다.
  • document.body는 <body>를 참조한다.

※ doctype은 DocumentType() 생성자로부터 생성된다.

DOM 사양/기능 탐지하기

document.implementation.hasFeature()를 사용하면 현재 문서에 대해 브라우저가 구현/지원하는 기능 및 수준에 대해 물어볼 수 있다.

console.log(document.implementation.hasFeature('Core', '2.0'));
console.log(document.implementation.hasFeature('Core', '3.0'));

hasFeature()만을 신뢰하지 말고, hasFeature()외에 기능 탐지를 함께 사용해야 한다. (http://bit.ly/XcI54f);

포커스 및 활성화 상태인 노드에 대한 참조 얻기

document.activeElement를 사용하면, 문서 내에서 포커스를 가지고 있거나 활성 상태인 노드에 대한 참조를 바로 얻을 수 있다.

특정 노드에 포커스 판별

document.hasFocus() 메서드를 사용하면, 사용자가 현재 해당 HTML 문서가 로드된 창에 포커스를 두고 있는지를 알 수 있다.

/* 문서가 로드된 창/탭에 계속 포커스를 두면 true가 반환된다.
그렇지 않을 경우, false가 반환된다. */
setTimeout(function(){console.log(document.hasFocus())}, 5000);

document.defaultView는 최상위/전역 개체에 대한 바로가기다.

console.log(document.defaultView)

Document에 대한 참조 얻기

노드에서 ownerDocument속성을 호출하면, 노드가 포함된 document에 대한 참조를 반환한다.

<iframe src="file.html"></iframe>

<script>
//<body>가 포함된 window.document를 얻음.
console.log(document.body.ownerElement);

//iframe 내의 <body>가 포함된 window.document를 얻음
console.log(document.frames[0].document.body.ownerElement);
</script>