DOMDocument节点类型详解
在前⾯ 中，我们知道了 DOM 总共有 12 个节点类型，今天我们就来讲下 DOM 中最重要的节点类型之⼀的 document 节点类型。
1、概况
Javascript 通过 Document 类型表⽰⽂档。在浏览器中， document 对象是 HTMLDocument（继承⾃ Document 类型）的⼀个实例，表⽰整个 HTML 页⾯。⽽且， document 对象是 window 对象的⼀个属性，因此可以将其作为全局对象来访问。 Document 节点具有如下特性：
1. nodeType 的值为 9
2. nodeName 的值为 '#document'
3. nodeValue 的值为 null
4. parentNode 的值为 null
5. ownerDocument 的值为 null
6. 其⼦节点可能是⼀个 DocumentType（最多⼀个）、Element(最多⼀个）、ProcessingInstruction 或者 Comment
Document 类型可以表⽰ HTML 页⾯或者其他基于 XML 的⽂档。不过最常见的应⽤还是作为 HTMLDocument 实例的 document 对象。通过这个⽂档对象，不仅可以取得与页⾯有关的信息，⽽且还能操作页⾯的外观及其底层结构。
var d = document;
console.deType); // 9
console.deName); // #document
console.deValue); // null
console.log(d.parentNode); // null
console.log(d.ownerDocument); // null
2、⽂档的⼦节点
虽然 DOM 标准规定 Document 节点的⼦节点可以是 DocumentType（最多⼀个）、Element(最多⼀个）、ProcessingInstruction 或者 Comment，但还是有两个内置的访问其⼦节点的快捷⽅式。第⼀个就是 documentElement 属性，该属性始终指向 HTML 页⾯中的<html> 元素，另⼀个就是通过 childNodes 列表访问⽂档元素：（假设没有指定⽂档类型）
var html = document.documentElement;
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true
作为 HTMLDocument 的实例，document 对象还有⼀个 body 属性，直接指向 <body> 元素。
var body = document.body;
所有的浏览器都⽀持 document.documentElement 和 document.body 属性
Document 另⼀个可能的⼦节点是 DocumentType。通常将 <!DOCTYPE> 标签看成⼀个和⽂档其他部分不同的实体，可以通过
doctype 属性来访问它的信息：
var doctype = document.doctype; // 取得对 <!DOCTYPE> 的引⽤
html document是什么console.log(doctype);
console.log(document.firstChild === doctype); // true
console.log(document.childNodes.length); // 2 (doctype 以及 documentElement)
但是浏览器对 document.doctype 的⽀持差别很⼤，使得这个属性的⽤处很有限。
⽂档的⼦节点还能是注释节点：
<!-- a -->
<!DOCTYPE html>
<script>
console.log(document.childNodes.length); // 3 （chrome）
</script>
<!-- b -->
但是，现实中的浏览器在处理位于 <html> 外部的注释⽅⾯存在差异，⽐如 chrome 下就直接忽视上⾯的第⼆个注释节点。
3、⽂档信息
作为 HTMLDocument 的⼀个实例，document 对象还有⼀些标准的 Document 对象所没有的属性。
// 取得⽂档标题
var title = document.title;
// 设置⽂档标题
document.title = 'New Page Title';
// 取得完整的 url
var url = document.url;
// 取得域名
var domain = document.domain;
// 取得来源页⾯的 url
var referrer = ferrer;
domain 属性是可以设置的，这点在跨域通信中应⽤甚⼴。由于安全⽅⾯的考虑，也并⾮可以给 domain 设置任何值。
// 假设页⾯来⾃ p2p.wrox
document.domain = 'wrox'; // 成功
document.domain = 'cnblogs'; // 出错
浏览器对 domain 属性还有⼀个限制，即如果域名⼀开始是 “松散的”，那么不能再将它设置为 “紧绷的”：
// 假设页⾯来⾃ p2p.wrox
document.domain = 'wrox';
document.domain = 'p2p.wrox'; // 出错
4、查元素
var a = ElementById('..');
var b = ElementsByTagName('..');
// HTMLCollection
var images = ElementsByTagName('img');
console.log(images.length);
console.log(images[0].src);
console.log(images.item(0).src);
// 通过元素的name特性取得集合中的项
var myImage = images.namedItem('..');
/
/ 也可以
var myImage = images['..']; // .. 为name值
// 对于HTMLCollection⽽⾔，我们可以向⽅括号中传⼊数字或者字符串（name值）
// 在后台，对数字调⽤item()，对字符串索引调⽤namedItem()
var myImage = images[0];
var myImage = images['nameOfMyImage'];
// 取得⽂档中的所有元素
var allElements = ElementsByTagName('*');
// ElementsByName
var radios = ElementsByName('color');
5、特殊集合
除了属性和⽅法，document 对象还有⼀些特殊的集合，这些集合都是 HTMLCollection 对象，为访问⽂档常⽤的部分提供了快捷⽅式：
document.anchors // 包含所有带name特性的<a>元素
document.forms // 包含⽂档中所有的<form>元素
document.images // 包含⽂档中所有的<img>元素
document.links // 包含⽂档中所有带href的<a>元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。