Document 노드 개요
HTMLDocument 생성자는 DOM 내에 DOCUMENT_NODE를 생성한다.
이를 확인하려면, document 노드 개체 생성에 사용되는 생성자가 무엇인지를 물어보면 된다.
<script>
console.log(window.document.constructor); // function HTMLDocument() { [native code] }
console.log(window.document.nodeType); // DOCUMENT_NODE에 대한 숫자 키 매핑인 9가 출력
</script>
Document 및 HTMLDocument 생성자는 보통 HTML 문서를 로드 시 브라우저에 의해 인스턴스가 만들어진다.
하지만 document.implementation.createHTMLDocument()를 사용하면, 브라우저 내에 현재 로드된 문서 외부에 직접 HTML 문서를 생성할 수 있다.
createHTMLDocument() 외에, createDocument()를 사용하여 HTML 문서로 설정된 document 개체를 생성할 수 있다.
이 메서드들을 사용하는 예로, 프로그래밍적인 방법으로 iframe에 HTML 문서를 제공하는 것을 들 수 있다.
HTMLDocument의 속성 및 메서드 (상속된 것 포함)
<script>
//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());
</script>
주목해야 할 속성과 메서드.
- doctype
- documentElement
- implementation.*
- activeElement
- body
- head
- title
- lastModified
- referrer
- URL
- defaultview
- compatMode
- ownerDocument
- hasFocus()
일반적인 HTML 문서 정보 얻기 (제목, url, referrer, 최종 수정일, 호환 모드)
<script>
var d = document
console.log(d.title);
console.log(d.URL);
console.log(d.referrer);
console.log(d.lastModified);
console.log(d.compatMode); // BackCompat (quirks 모드) 또는 css1Compat (strict 모드) 중 하나가 출력.
</script>
document 자식 노드
document 노드는 DocumentType 노드 개체 하나와 Element 노드 개체 하나를 가질 수 있다.
document는 <!DOCTYPE>, <html lang="ko">, <head>, <body>에 대한 바로가기를 제공한다.
- document.doctype은 <!DOCTYPE>을 참조한다.
- document.documentElement는 <html lang="ko">을 참조한다.
- document.head는 <head>를 참조한다.
- document.body는 <body>를 참조한다.
document.implementation.hasFeature()를 사용하여 DOM 사양/기능 탐지하기
현재 문서에 대해 브라우저가 구현/지원하는 기능 및 수준에 대해 물어볼 수 있다.
예를 들어, 브라우저가 Core DOM Level3 사양을 구현했는지를 물어보려면, hasFeature() 메서드에 기능 명칭과 버전을 전달한다.
console.log(document.implementation.hasFeature("Core","2.0"));
문서 내에서 포커스를 가지고 있거나 활성 상태인 노드에 대한 참조를 얻기.
document.activeElement를 사용하면, 문서 내에서 포커스를 가지고 있거나 활성 상태인 노드에 대한 참조를 바로 얻을 수 있다.
<textarea></textarea>
<script>
document.querySelector("textarea").focus(); // textarea에 포커스 설정.
console.log(document.activeElement); // textarea 출력.
</script>
문서 혹은 문서 내의 특정 노드가 포커스를 가지고 있는지 판별하기.
document.hasFocus() 메서드를 사용하면, 사용자가 현재 해당 HTML 문서가 로드된 창에 포커스를 두고 있는지를 알 수 있다.
<script>
// 문서가 로드된 창/탭에 계속 포커스를 두면 true가 반환. 그렇지 않을 경우 false가 반환.
setTimeout(function(){console.log(documnet.hasFocus())}, 5000);
</script>
document.defaultView는 최상위/전역 개체에 대한 바로가기.
웹 브라우저에서 최상위 개체는 window 개체이므로,
자바스크립트 브라우저 환경에서 defaultView는 이 개체를 가리킨다.
console.log(document.defaultView) // 최상위 js 개체에 대한 참조. 브라우저에서는 window 개체다.
최상위 개체가 없는 DOM이나 웹 브라우저 내에서 실행되지 않은 자바스크립트 환경의 경우
이 속성은 최상위 개체 영역에 접근할 수 있게 해준다.
Element에서 ownerDocument를 사용하여 Documnet에 대한 참조 얻기.
ownerDocument 속성을 호출하면, 노드가 포함된 document에 대한 참조를 반환한다.
다음 코드에서는 HTML 문서 내의 <body>에서 document에 대한 참조를 얻고,
iframe 내에 포함된 <body> element에서 document 노드를 얻어낸다.
<body>
<iframe src=""></iframe>
</body>
<script>
// body가 포함된 window.document를 얻음.
console.log(document.body.ownerElement);
//iframe 내의 <body>가 포함된 window.document를 얻음.
console.log(window.frames[0].document.body.ownerElement);
</script>
document 노드에서 dwnerDocument를 호출하면 null 값이 반환된다.
'UI개발' 카테고리의 다른 글
| DOM - Element 노드 지오메트리와 스크롤링 지오메트리 / 인라인 스타일 (0) | 2016.09.22 |
|---|---|
| DOM - Element 노드 / Element 노드 선택 (0) | 2016.09.19 |
| DOM - 노드 개요 (0) | 2016.09.11 |
| -webkit-tap-highligh-color (0) | 2016.08.07 |
| ui, ux (0) | 2016.08.07 |