Document Nodes
2.1 document Node Overview
- document로부터 상속받은 HTMLDocument constructor는 DOM에서 DOCUMENT_NODE (ex. window.document)를 만듬
- HTMLDocument 생성자 함수가 window.document 노드 개체를 구성하고 이 개체가 DOCUEMENT_NODE 개체라는 결론
<!DOCtyPE html>
<html lang="en">
<body>
<script>
// logs function HTMLDocument9) { [native code] }
console.log(window.document.constructor);
// logs 9, which is a numeric key mapping to DOCUMENT_NODE
console.log(window.document.nodeType);
</script>
</body>
</html>
cf)
- Document 및 HTMLDocument 생성자는 일반적으로 HTML 문서를 로드할 때 브라우저에 의해 인스턴스화 됨
- document.implementation.createHTMLDocument()를 사용하면 현재 브라우저에 로드된 HTML 문서 외에 새롭고 고유한 HTML 문서를 만들 수 있음
- 이러한 방법의 사용 예는 iframe에 HTML 문서를 프로그래밍 방식으로 제공하는 것
2.2. HTMLDocument Properties and Methos (Including Inherited)
- HTMLDocument 노드에서 사용 가능한 속성과 메서드를 얻으려면 무엇이 가능한지 브라우저에 물어보는 것이 가장 좋은 방법
<!DOCTYPE html>
<html lang="en">
<body>
<script>
// document own properties
console.log(Object.keys(document).sort());
// document own properties and inherited properties
var documentPropertiesIncludedInherited = [];
for (var p in document) {
documentPropertiesIncludedInherited.push(p);
}
console.log(documentPropertiesIncludeInherited.sort());
// document inherited properties only
var documentPropertiesOnlyInherited = [];
for (var p in document) {
if (!document.hasOwnProperty(p)) {
documentPropertiesOnlyInherited.push(p);
}
}
console.log(documentPropertiesOnlyInherited.sort());
</script>
</body>
</html>
- 주요 속성
- doctype
- documentElement
- implementation.*
- activeEelent
- body
- head
- title
- lastModified
- referrer
- URL
- defualtview
- compatMode
- ownerDocument
- hasFocus()
2.3 Getting General HTML Document Information (title, url, referrer, lastModified, and compatMode)
- title, url, referrer, lastModified, and compatMode에 관련된 속성을 document 객체를 통해 얻을 수 있음
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var d = document;
console.log('title = ' + d.title);
console.log('url = ' + d.URL);
console.log('referrer =', + d.referrer);
console.log('lastModified = ' + d.lastModified);
// lofs either BackCompat (Quirks Mode) or CSS1Compat (Strict Mode)
console.log('compatibility mode = ' + d.compatMode);
</script>
</body>
</html>
2.4 document Child Nodes
- document node는 DocumentType node 객체 하나와 Element node 객체 하나를 가질 수 있음
- document node = DocumentType node + Element node
- 즉,
<!DOCTYPE html><html lang="en">...</html>
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var d = document;
// logs 10, which is a numeric key mapping to DOCUMENT_TYPE_NODE
console.log(d.childNodes[0].nodeType);
// logs 1, which is a numeric key mapping to ELEMENT_TYPE_NODE
console.log(d.childNodes[1]nodeType);
</script>
</body>
</html>
window.document는 HTMLDocument 생성자로부터 만들어졌으며, DOM interface의 시작점임.
(따라서 document.childNodes에 하위 노드가 존재)- Document object와는 다름
2.5 Document Provides Shortcuts to <!DOCTYPE>, <html lang="ko">, <head>, and, <body>
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var d = document;
// logs documentType {nodeType=10, ownerDocument=document, ...}
console.log(d.doctype);
// logs 1, <html lang="ko">
console.log(d.documentElement);
// logs <head>
console.log(d.head);
// logs <body>
console.log(d.body);
</script>
</body>
</html>
- doctype 또는 DTD는 nodeType 10 또는 DOCUMENT_TYPE_NODE이며, DOCUMNET_NODE과 다름
- DOCUMNET_NODE →
window.document는 HTMLDocument 생성자로부터 만들어졌으며, DOM interface의 시작점 - DOCUMENT_TYPE_NODE → doctype은 DocumentType() 생성자로부터 만들어짐
- DOCUMNET_NODE →
2.6 Using document.implementation.hasFeature() to Detect DOM Specifications/Features
표1. hasFeature() 매개변수 값
| 특징 | 지원되는 버전 |
|---|---|
| Core | 1.0, 2.0, 3.0 |
| XML | 1.0, 2.0, 3.0 |
| HTML | 1.0, 2.0 |
| Views | 2.0 |
| StyleSheets | 2.0 |
| CSS | 2.0 |
| CSS2 | 2.0 |
| Events | 2.0, 3.0 |
| UIEvents | 2.0, 3.0 |
| MouseEvents | 2.0, 3.0 |
| MutationEvents | 2.0, 3.0 |
| HTMLEvents | 2.0 |
| Range | 2.0 |
| Traversal | 2.0 |
| LS(loading and saving between files and DOM trees synchronously) | 3.0 |
| LS-Async(loading and saving between files and DOM trees asynchronously) | 3.0 |
| validation | 3.0 |
- hasFeature()은 참고용으로만 사용하는 것을 권장
- isSupported 메서드를 사용하면 특정 노드에 대해서만 구현 정보를 수집할 수 있음 (ex. element.isSupported(feature, version))
2.7 Getting a Reference to the Focus / Active Node in the Document
