前面的话
文档节点document，隶属于表示浏览器的window对象，它表示网页页面，又被称为根节点。本文将详细介绍文档节点document的内容
特征
文档节点的三个node属性——nodeType、nodeValue、nodeName分别是9、’#document’和null
由于它是根节点，所以其父节点parentNode指向null，ownerDocument也指向null
console.log(document.nodeType);//9 console.log(document.nodeValue);//null console.log(document.nodeName);//'#document' console.log(document.parentNode);//null console.log(document.ownerDocument);//null
快捷访问
子节点
【1】<html>
document.documentElement属性始终指向HTML页面中的<html>元素
console.log(document.documentElement.nodeName);//'HTML'
【2】<body>
document.body属性指向<body>元素
console.log(document.body.nodeName);//'BODY'
【3】<!DOCTYPE>
document.doctype属性指向<!DOCTYPE>标签
[注意]IE8-不识别，输出null，因为IE8-浏览器将其识别为注释节点
console.log(document.doctype.nodeName);//'html'
【4】<head>
document.head属性指向文档的<head>元素
[注意]IE8-浏览器下不支持
console.log(document.head.nodeName);//'HEAD'
文档信息
【1】title
<title>元素显示在浏览器窗口的标题栏或标签页上，document.title包含着<title>元素中的文本，这个属性可读可写
console.log(document.title);//Document document.title="test"; console.log(document.title);//test
【2】URL、domain、referrer
URL：页面的完整地址
domain：domain与URL是相互关联的，包含页面的域名
referrer：表示链接到当前页面的上一个页面的URL，在没有来源页面时，可能为空
[注意]上面这些信息都来自请求的HTTP头部，只不过可以通过这三个属性在javascript中访问它而已
console.log(document.URL);//http://www.cnblogs.com/xiaohuochai/ console.log(document.domain);//www.cnblogs.com console.log(document.referrer);//http://home.cnblogs.com/followees/
在这3个属性中，只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设罝任何值。如果URL中包含一个子域名，例如home.cnblogs.com,那么就只能将domain设置为”cnblogs.com”。不能将这个属性设置为URL中不包含的域
document.domain = 'cnblogs.com';//"cnblogs.com" //Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'qq.com' is not a suffix of 'cnblogs.com' document.domain = 'qq.com';
【3】baseURI
document.baseURI返回<base>标签中的URL，如果没有设置<base>，则该值与document.URL相同
console.log(document.baseURI);'//http://www.cnblogs.com/xiaohuochai/' <base href="http://www.baidu.com"> <script> console.log(document.baseURI);//'http://www.baidu.com/' </script>
【4】字符集charset
document.charset表示文档中实际使用的字符集
console.log(document.charset);//'UTF-8'
【5】defaultView
document.defaultView保存着一个指针，指向拥有给定文档的窗口或框架。IE8-浏览器不支持defaultView属性，但IE中有一个等价的属性名叫parentWindow。所以要确定文档的归属窗口，其兼容写法为：
var parentWindow = document.defaultView || document.parentWindow;//Window
【6】兼容模式compatMode
document.compatMode表示文档的模式，在标准模式下值为”CSS1Compat”，在兼容模式下值为”BackCompat”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> console.log(document.compatMode)//CSS1Compat </script> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> console.log(document.compatMode)//BackCompat </script> </body> </html>
【7】文档模式documentMode
document.documentMode属性表示当前的文档模式
[注意]该属性只有IE11-浏览器支持
//IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6 console.log(document.documentMode);
【8】时间戳lastModified
document.lastModified属性返回当前文档最后修改的时间戳，格式为字符串
console.log(document.lastModified); //09/02/2016 15:36:15
节点集合
【1】anchors
document.anchors包含文档中所有带name特性的<a>元素
<a href= "#" name="a1">a1</a> <a href= "#" name="a2">a2</a> <a href= "#" >3</a> <script> console.log(document.anchors.length)//2 </script>
【2】links
document.links包含文档中所有带href特性的<a>元素
<a href="#">1</a> <a href="#">2</a> <a>3</a> <script> console.log(document.links.length)//2 </script>
【3】forms
document.forms包含文档中所有的<form>元素，与document.getElementsByTagName(“form”)结果相同
<form action="#">1</form> <form action="#">2</form> <script> console.log(document.forms.length)//2 </script>
【4】images
document.images包含文档中所有的<img>元素，与document.getElementsByTagName(‘img’)结果相同
<img src="#" alt="#"> <img src="#" alt="#"> <script> console.log(document.images.length)//2 </script>
【5】scripts
document.scripts属性返回当前文档的所有脚本(即script标签)
<script> console.log(document.scripts.length)//1 </script>
以上五个属性返回的都是HTMLCollection对象实例
[注意]关于HTMLCollection等动态集合的详细信息移步至此
console.log(document.links instanceof HTMLCollection); // true console.log(document.images instanceof HTMLCollection); // true console.log(document.forms instanceof HTMLCollection); // true console.log(document.anchors instanceof HTMLCollection); // true console.log(document.scripts instanceof HTMLCollection); // true
由于HTMLCollection实例可以用HTML元素的id或name属性引用，因此如果一个元素有id或name属性，就可以在上面这五个属性上引用
<form name="myForm"> <script> console.log(document.myForm === document.forms.myForm); // true </script>
文档写入方法
将输出流写入到网页的能力有4个方法：write()、writeln()、open()、close()
write()和writeln()
write()和writeln()方法都接收一个字符串参数，即要写入到输出流中的文本
write()会原样写入，而writeln()则在字符串的末尾添加一个换行符(\n)，但换行符会被页面解析为空格
在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容
<button id="btn">替换内容</button> <script> btn.onclick = function(){ document.write('123'); document.writeln('abc'); document.write('456'); } </script>
open()和close()
open()和close()方法分别用于打开和关闭网页的输出流
open()方法实际上等于清除当前文档
<button id="btn">清除内容</button> <script> btn.onclick = function(){ document.open(); } </script>
close()方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。如果再调用write方法，就等同于又调用open方法，新建一个文档，再写入内容。所以，实际上，close()只是和open()方法配套使用而已
<button id="btn">替换内容</button> <script> //相当于'123'又把'1'覆盖了 btn.onclick = function(){ document.open(); document.write('1'); document.close(); document.write('123'); } </script>
一般地，先使用open()方法用于新建一个文档，然后使用write()和writeln()方法写入文档，最后使用close()方法，停止写入
<button id="btn">替换内容</button> <script> btn.onclick = function(){ document.open(); document.writeln('hello'); document.write('world'); document.close(); } </script>
[注意]如果是在页面加载期间使用write()和writeln()方法，则不需要用到这两个方法
<button id="btn">内容</button> <script> document.writeln('hello'); document.write('world'); </script>
最后
节点类型系列终于完结了
DOM共有12种节点类型。其中，常用的有Element元素节点、Attribute特性节点、Text文本节点、Comment注释节点、Document文档节点和DocumentFragment文档片段节点
欢迎交流
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/108890.html原文链接：https://javaforall.net
