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

时间:2021-08-19 04:23:57

前面的话

  文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点。本文将详细介绍文档节点document的内容

特征

  文档节点的三个node属性——nodeType、nodeValue、nodeName分别是9、'#document'和null

  由于它是根节点,所以其父节点parentNode指向null,ownerDocument也指向null

console.log(document.nodeType);//
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文档片段节点

  欢迎交流