深入理解DOM节点类型第七篇——文档节点DOCUMENT

前面的话

　　文档节点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文档片段节点

　　欢迎交流

posted @ 2016-09-02 16:46 小火柴的蓝色理想阅读(3625) 评论(2) 编辑收藏举报

刷新页面返回顶部

小火柴的蓝色理想

深入理解DOM节点类型第七篇——文档节点DOCUMENT

前面的话

特征

快捷访问

文档写入方法

最后

公告