第10章 文檔對象模型DOM 10.2 Document類型
Document 類型
JavaScript 通過 Document 類型表示文檔。在瀏覽器中， document 對象是 HTMLDocument （繼承自 Document 類型）的一個實例，表示整個 HTML 頁面。而且， document 對象是 window 對象的一個屬性，因此可以將其作為全局對象來訪問。
Document 類型可以表示 HTML 頁面或者其他基於 XML 的文檔。不過，最常見的應用還是作為HTMLDocument 實例的 document 對象。通過這個文檔對象，不僅可以取得與頁面有關的信息，而且還能操作頁面的外觀及其底層結構。
在 Firefox、Safari、Chrome 和 Opera 中，可以通過腳本訪問 Document 類型的構造函數和原型。 但在所有瀏覽器中都可以訪問 HTMLDocument 類型的構造函數和原型，包括 IE8及後續版本。
雖然 DOM 標準規定 Document 節點的子節點可以是 DocumentType 、 Element 、 ProcessingIn-
struction 或 Comment ， 但還有兩個內置的訪問其子節點的快捷方式。 第一個就是 documentElement屬性， 該屬性始終指向 HTML 頁面中的 <html> 元素。 另一個就是通過 childNodes 列表訪問文檔元素，但通過 documentElement 屬性則能更快捷、更直接地訪問該元素。
如下所示：
<html>
<body>
</body>
</
頁面在經過瀏覽器解析後，其文檔中只包含一個子節點，即 <html> 元素。可以通過documentElement 或 childNodes 列表來訪問這個元素，即：
var html = document.documentElement; //取得對<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
例子說明， documentElement 、 firstChild 和 childNodes[0] 的值相同，都指向 <html>元素。
作為 HTMLDocument 的實例， document 對象還有一個 body 屬性，直接指向 <body> 元素。
var body = document.body; //取得對<body>的引用
所有瀏覽器都支持 document.documentElement 和 document.body 屬性。
Document 另一個可能的子節點是 DocumentType，但是由於瀏覽器對 document.doctype 的支持不一致，因此這個屬性的用處很有限。
文檔信息
作為 HTMLDocument 的一個實例， document 對象還有一些標準的 Document 對象所沒有的屬性,這些屬性提供了 document 對象所表現的網頁的一些信息。比如屬性 title ，包含著<title> 元素中的文本——顯示在瀏覽器窗口的標題欄或標簽頁上。 通過這個屬性可以取得當前頁面的標題， 也可以修改當前頁面的標題並反映在瀏覽器的標題欄中。
介紹3個與網頁請求有關的屬性，它們是 URL 、domain 和 referrer 。 URL 屬性中包含頁面完整的 URL（即地址欄中顯示的 URL） ， domain 屬性中只包含頁面的域名，而 referrer屬性中則保存著鏈接到當前頁面的那個頁面的 URL。在沒有來源頁面的情況下， referrer 屬性中可能會包含空字符串。所有這些信息都存在於請求的 HTTP 頭部，只不過是通過這些屬性讓我們能夠在JavaScrip 中訪問它們而已，
如下所示：
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得來源頁面的 URL
var referrer = document.referrer;
URL 與 domain 屬性是相互關聯的。如果 document.URL 等於http://www.wrox.com/WileyCDA/，
那麽 document.domain 就等於 www.wrox.com。
在這 3 個屬性中，只有 domain 是可以設置的。但由於安全方面的限制，不能將這個屬性設置為 URL 中不包含的域。
//假設頁面來自 p2p.wrox.com 域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 出錯！
當頁面中包含來自其他子域的框架或內嵌框架時，能夠設置 document.domain 就非常方便了。由於 跨 域 安 全 限 制 ， 來 自 不 同 子 域 的 頁 面 無 法 通 過 JavaScript 通 信 。 而 通 過 將 每 個 頁 面 的document.domain 設置為相同的值，這些頁面就可以互相訪問對方包含的 JavaScript 對象了。
假設有一個頁面加載自 www.wrox.com，其中包含一個內嵌框架，框架內的頁面加載自 p2p.wrox.com。
由於 document.domain 字符串不一樣，內外兩個頁面之間無法相互訪問對方的 JavaScript 對象。但如
果將這兩個頁面的 document.domain 值都設置為 "wrox.com" ，它們之間就可以通信了。
瀏覽器對 domain 屬性還有一個限制，即如果域名一開始是“松散的” （loose） ，那麽不能將它再設
置為“緊繃的” （tight） 。換句話說，在將 document.domain 設置為 "wrox.com" 之後，就不能再將其設置回 "p2p.wrox.com" ，否則將會導致錯誤。
查找元素
Document 類型為此提供了兩個方法： getElementById() 和 getElementsByTagName()。
getElementById() 如果找到相應的元素則返回該元素，如果不存在帶有相應 ID 的元素，則返回 null，如果頁面中多個元素的 ID 值相同，只返回文檔中第一次出現的元素。
getElementsByTagName() 在 HTML 文檔中，這個方法會返回一個 HTMLCollection 對象，作為一個“動態”集合，該對象與 NodeList 非常類似。
與 NodeList 對象類似，可以使用方括號語法或 item() 方法來訪問 HTMLCollection 對象中的項。 而這個對象中元素的數量則可以通過其 length 屬性取得。
如下所示：
var images = document.getElementsByTagName("img");
alert(images.length); //輸出圖像的數量
alert(images[0].src); //輸出第一個圖像元素的 src 特性
alert(images.item(0).src); //輸出第一個圖像元素的 src 特性
假設上面的頁面中包含如下 <img> 元素：<img src="myimage.gif" name="myImage">，則可以
var myImage = images.namedItem("myImage");
var myImage = images["myImage"];
要想取得文檔中的所有元素，可以向 getElementsByTagName() 中傳入 "*" 。在 JavaScript 及 CSS
中，星號（ * ）通常表示“全部” 。
如 var allElements = document.getElementsByTagName("*");返回整個頁面中的所有節點元素。
getElementsByName()只有 HTMLDocument 才有的方法， 這個方法會返回帶有給定 name 特性的所有元素。
特殊集合
除了屬性和方法， document 對象還有一些特殊的集合。這些集合都是 HTMLCollection 對象，為訪問文檔常用的部分提供了快捷方式：
document.anchors ，包含文檔中所有帶 name 特性的 <a> 元素；
document.applets ，包含文檔中所有的 <applet> 元素，因為不再推薦使用 <applet> 元素，所以這個集合已經不建議使用了；
document.forms ， 包含文檔中所有的 <form> 元素， document.getElementsByTagName("form")
得到的結果相同；
q document.images ，包含文檔中所有的 <img> 元素，與 document.getElementsByTagName
("img") 得到的結果相同；
q document.links ，包含文檔中所有帶 href 特性的 <a> 元素。
DOM 一致性檢測
由於 DOM 分為多個級別，也包含多個部分，因此檢測瀏覽器實現了 DOM 的哪些部分就十分必要
了。 document.implementation 屬性就是為此提供相應信息和功能的對象，與瀏覽器對 DOM 的實現直接對應。DOM1 級只為 document.implementation 規定了一個方法，即 hasFeature() 。這個方法接受兩個參數：要檢測的 DOM 功能的名稱及版本號。如果瀏覽器支持給定名稱和版本的功能，則該方法返回 true 。如下所示：
var hasXmlDom = document.implementation.hasFeature("XML", "1.0");
下表列出了可以檢測的不同的值及版本號：
盡管使用 hasFeature() 確實方便，但也有缺點。因為實現者可以自行決定是否與 DOM 規範的不
同部分保持一致。即返回 true有時候也不意味著實現與規範一致
文檔寫入
將輸出流寫入到網頁中的能力，體現在下列 4 個方法中： write() 、 writeln() 、 open() 和 close() 。
其中， write() 和 writeln()方法都接受一個字符串參數，即要寫入到輸出流中的文本。 write() 會原樣寫入，而 writeln() 則會在字符串的末尾添加一個換行符（ \n ） 。在頁面被加載的過程中，可以使用這兩個方法向頁面中動態地加入內容。
如下所示：
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
此外，還可以使用 write() 和 writeln() 方法動態地包含外部資源，例如 JavaScript 文件等。如：
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +"<\/script>");
</script>
</body>
</html>
字符串 "<\/script>" 不會被當作外部 <script> 標簽的關閉標簽，因而頁面中也就不會出現多余的內容了。
方法 open() 和 close() 分別用於打開和關閉網頁的輸出流。 如果是在頁面加載期間使用 write()或 writeln() 方法，則不需要用到這兩個方法。
第10章 文檔對象模型DOM 10.2 Document類型