Javascript高級編程學習筆記（36）—— DOM（2）Document
Documet類型
了解了基礎的Node類型過後，我們來聊聊Node中的Document類型
我們知道所有的節點都繼承自Node類型
所以除了Node類型公有的方法和類型之外，Document類型還有一些自己的特性
JS通過Document類型來表示文檔
在瀏覽器中 document 對象是 HTMLDocument 的一個實例（繼承自Document類型）
表示整個 HTML 頁面，且 document 對象是 window 對象的一個屬性所以可以作為全局對象訪問
具有以下特征：
1、nodeName：#document
2、nodeValue：null
3、parentNode：null
4、nodeType：9
5、ownerDocument：null
文檔的子節點
DOM標準規定 Document 節點的子節點可以是
1、DocumentType（文檔類型聲明）
2、Element
3、ProcessingInstruction
4、Comment
通過documentElement屬性可以更快地訪問 document 的子節點
該屬性始終指向頁面中的<html>
也可以通過 childNodes 來訪問頁面中的<html>
但是有些時候在 html 之前可能會有註釋節點
所以如果需要訪問 <html> 最好還是使用 document.documentElement 來訪問
JS中document 還有個 body 屬性用於訪問 <body> 節點
doctype 屬性用於訪問 <!DOCTYPE html> 也就是文檔類型聲明，但是不同瀏覽器在該屬性上的差異較大，所以不推薦使用
具體差異在：
1、IE8以下始終為null，會將其解析為註釋節點
2、IE8以上若存在，會將其作為document 的第一個子節點
3、在非IE瀏覽器中，該屬性會正確指向文檔聲明，但是不會出現在 childNodes 中
關於註釋節點，不同瀏覽器的解析也存在著較大的差異
所以 <html> 外部的註釋節點作用極為有限
文檔信息
document 作為 HTMLDocument 的實例，document 對象還有一些標準的 Document 對象所沒有的屬性
1、title 指向頁面中的 <title> 內容，通過修改該值可以修改頁面的標題
2、URL 包含頁面完整的 URL地址（即顯示在地址欄中的內容）
3、domain 頁面的域名
4、referrer 來源url 通常為空，只有重定向的頁面有該值
後面三個屬性中只有 domain 可以設置值，但是只能設置為 URL 中包含的域名，也就是子域名
並且還有一個限制，一旦將其設置為子域名就不能再設回父域名，也就是只能設置為當前domain的子域名
查找元素
Dom操作中最基礎，也是最重要的功能就是查找元素了
該操作可以通過 document 對象的幾個方法來完成
Document提供的方法：
1、getElementById（） // 傳入元素ID，返回第一次匹配的元素，IE8以下不區分ID的大小寫，IE7以下有個bug 若在 ID元素的前面，有個表單元素的name與ID一致則會返回這個表單元素
2、getElementsByTagName（） // 傳入標簽名，返回一個包含（0或多個元素的）NodeList，在HTML文檔中會返回一個 HTMLCollection 對象，可以傳入 * 以獲取全部元素，html不區分大小寫，XML區分
PS、HTMLCollection 和 NodeList 類似，也是一個“動態” 的集合，該集合提供兩個方法用以訪問其中的元素
1、item（）傳入元素索引
2、namedItem（） 通過元素的name特性進行索引
並且如果對 HTMLCollection 使用方括號的方式進行訪問，在後臺仍舊調用的是 item 方法
還有一點需要註意，IE在實現上將註釋節點實現為元素，所以在使用* 獲取所有元素時也會獲取到註釋節點
HTMLDocument提供的方法：
getElementsByName （） 查找具有特定name的元素
與getElementByTagName 類似該方法返回一個 HTMLCollection
不過對於結果調用 namedItem 只會返回第一個，因為所有結果的name都是一樣的
特殊集合
document 對象還有一些特殊集合，為訪問文檔的常用部分提供了便利
這些集合都是 HTMLCollection
document.anchors 所有有name的a標簽的集合
document.forms 文檔中的所有 <form>
document.images 文檔中所有的<img>
document.links 文檔中所有有href屬性的a標簽
DOM一致性檢測
由於DOM分為多個級別，所以檢測瀏覽器具體實現了哪些就是一個十分必要的過程
document.implementation屬性為此提供了相應的功能和對象
DOM1中只為其提供了一個方法 hasFeature
該方法需要兩個參數，第一個是需要檢測的功能，第二個參數是該功能的版本號，兩個參數都為字符串串形式
可以檢測的功能有以下值：
1.Core // 基本DOM
2.XML // Core的XML拓展
3.HTML // XML對HTML的拓展
4.Views // 樣式的文檔格式化
5.StyleSheets // 將樣式表關聯到文檔
6.CSS // 對層疊樣式表1級的支持
7.CSS2 // 對層疊樣式表2級支持
8.Events // 常規DOM事件
9.UEvents // 用戶界面事件
10.MouseEvents // 鼠標事件
11.MutationEvents // DOM樹變化時的事件
12.HTMLEvents // HTML4.01的事件
13.Range // 對範圍操作的支持
14.Traversal // 遍歷DOM樹的方法
15.LS // 文件與DOM樹的同步加載與保存
16.LS-Async // 文件與DOM樹之間的異步加載與保存
17.Validation // 確保有效的前提下修改DOM樹的方法
PS.由於這裏的屬性值，由瀏覽器廠商設置，所以很可能不準確，所以需要能力檢測與之配合使用
文檔寫入
document 對象還有一個十分重要的功能，那就是將輸出流寫入到網頁中的能力
提供了4個方法：
1、write 接收一個字符串，將其原樣寫入到網頁中
2、writeln 接收一個字符串，將字符串末尾添加 \n 換行後寫入頁面
3、open 打開網頁輸出流
4、close 關閉網頁輸出流
如果頁面加載完成，那麽輸出的內容將會重寫整個頁面
Javascript高級編程學習筆記（36）—— DOM（2）Document