深入理解DOM節點類型第七篇——文檔節點DOCUMENT - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　文檔節點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文檔片段節點

　　歡迎交流

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds