Document類型
JavaScript通過Document類型表示文檔。在瀏覽器中,document對象是HTMLDocument(繼承自Document類型)的一個實例,表示整個HTML也頁面。而且,document對象是window對象的一個屬性,可以作為全局對象來訪問。Document節點具有下列特征:
- nodeType的值為9
nodeName的值為"#document"
nodeValue的值為null
parentNode的值為null
ownerDocument的值為null
其節點可能是一個DocumentType(最多一個)、Element(最多一個)、ProcessingInstruction或Comment。
Document類型可以表示HTML頁面或其他基于XML的文檔。最常見的應用還是作為HTMLDocument實例的document對象。通過這個文檔對象,不僅可以取得與頁面有關的信息,而且還能操作頁面的外觀及其底層結構。1.文檔的子節點
documentElement和childNodes內置的訪問文檔子節點的快捷方式。
documentElement始終指向HTML頁面中的<html>元素。
<html>
<body>
</body>
</html>
var html = document.documentElement;
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true
作為HTMLDocument實例,document對象還有一個body屬性,直接指向<body>元素。
var body = document.body; //取得對<body>引用
Document另一個可能的子節點是DocumentType。通常將<!DOCTYPE>標簽看成一個與文檔其它部分不同的實體,可以通過doctype屬性訪問。
var doctype = document.doctype; //取得對<!DOCTYPE>引用
瀏覽器對docume.doctype的支持差別很大。
- 2.文檔信息
作為HTMLDocument的一個實例,document對象還有一些標準的Document對象所沒有的屬性。
title屬性:包含著<title>元素中的文本。可以取得當前頁面的標題也可以修改。
var originalTitle = document.title;
document.title = "New page title"
接下來介紹的3個屬性都與對網頁的請求有關,它們是URL、domain和referrer。
URL屬性包含頁面完整的URL,domain屬性中只包含頁面的域名,referrer屬性保存著諒解到當前頁面的那個頁面的URL。在沒有來源頁面的情況下,referrer屬性中可能會包含空字符串。所有這些信息都存在于HTTP頭部,只不過通過這些屬性讓我們能夠在JavaScript中訪問它們而已。
var url = document.URL;
var domain = document.domain;
var referrer = document.referrer;
URL屬性與domain屬性是相互關聯的,如果document.URL等于https://www.baidu.com/,那么document.domain就等于www.baidu.com。
在3個屬性中,只有domain屬性是可設置的。但由于安全方面的限制,也并非可以給domain設置任何值。如果URL中包含一個子域名,如p2p.wrox.com,那就只能將domain設置為wrox.com。不能將這個屬性設置為URL中不包含的域。
//假設頁面來自p2p.wrox.com域
document.domain = "wrox.com" //成功
document.domain = "nczonline.net"; //出錯
由于跨域安全限制,來自不同子域的頁面無法通過JavaScript通信。而通過將每個頁面的document.domain設置為相同的值,這些頁面就可以互相訪問對方包含的JavaScript對象了。
例如,假設有一個頁面加載自www.wrox.com,其中包含一個內嵌框架,框架內的頁面加載p2p.wrox.com,由于documen.domain字符串不一樣,內外兩個頁面之間無法相互訪問對方的JavaScript對象,但如果將這兩個頁面的document.domain都設置為"wrox.com",它們之間就可以通信了。
瀏覽器對domain屬性還有一個限制,即如果document.domain設置為“松散的”就不能將它再設置為“緊繃的”。
document.domain = "wrox.com";//松散的(成功)
document.domain = "p2p.wrox.com";//緊繃的(出錯)
- 3.查找元素
最常見的DOM應用,就是取得特定的某個或某租元素的引用,然后在執行一些操作。
Document類型為此提供了兩個方法:getElemengById()和getElementsByTagName()。
getElemengById()接收一個參數,要取得的元素的ID。找到相應元素放回該元素,否則返回null。如果頁面中多個元素的ID值相同,則返回文檔中第一次出現的元素。
getElementsByTagName()接收一個參數,要取得的元素的標簽名,返回0或多個元素的NodeList。在HTML文檔中,這個方法會返回一個HTMLCollection對象,最為一個動態集合,該對象與NodeList非常相似。HTMLCollection對象有一個叫做namedItem()的方法。使用這個方法可以通過元素的name特性取得集合中的項。
var images = document.getElementsByTagName("img");
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);

var myImage = images.namedItem("myImage");
var myImage = images["myImage"];
對HTMLCollection,我們可以向方括號中傳入數值或字符串形式的所引致。在后臺,對數值索引會調用item(),對字符串索引會調用namedItem()。
HTMLDocument類型才有的方法,getElementsByName()。返回帶有給定name的所有元素。
- 4.特殊集合
處理屬性和方法,document對象還有一些特殊的集合,這些集合都是HTMLCollection對象,包括: - document.anchors,包含所有帶name特性的<a>元素;
- document.forms:包含文檔中所有<form>元素
- document.images:包含文檔中所有<img>元素
- document。links:包含文檔href特性的<a>元素
集合中的項會隨著當前文檔內容的更新而更新。
- 5.DOM一致性檢測
由于DOM分為多個級別,也包含多個部分,檢測瀏覽器實現了DOM的那些部分十分必要。
document.implementation屬性就是為此提供相應信息和功能的對象。DOM1級只為document.implementation規定了一個方法,hasFeature(),這個方法接受兩個參數,要檢測的DOM功能名稱即版本號。
var hasXmlDom = document.implementation.hasFeature("XML","1.0");
在使用DOM的某個特殊功能之前,最好處理檢測hasFeature之外,還同時使用能力檢測。
- 6.文檔寫入
document對象將輸出流寫入到網頁中的能力體現在下列4個方法中:write()、writeln()、open()和close()。write()、writeln()接收一個字符串參數,要寫入到輸出流中的文本。write()原樣寫,writeln()會在字符串末尾添加換行符(\n)。在頁面加載過程中,可以使用這兩個方法項頁面中動態加入內容。
open()和cloes()分別打開和關閉網頁的輸出流。