DOM - document

1、DOM

dom 是文檔在內存中的表現形式，它是一個應用程序接口，定義了該文檔的邏輯結構以及一套訪問和處理文檔的方法。應用程序要處理文檔都要將HTML或者XML轉換爲dom。

HTML中的元素轉化爲DOM文檔中的節點對象， DOM的節點類型：document  element comment type text. 其中 document是根節點。

1.HTML DOM 和核心DOM 的區別

HTML DOM 提供了大量遍歷的方法和屬性，都是在覈心DOM上修改來的

2.document 對象

window.document 是用來返回一個document 對象。  

document 的屬性

location URL domain cookie lastModified charset readyState ( 其中 location cookie readyState比較重要， )                                                

2.1 location

返回location 對象

2.2 cookie

用document.cookie返回的是一個字符串，字符串中有cookie的名稱，有效期，範圍，域, 通訊協議爲加密。

格式： document.cookie="name=value;expires=DATE; path=PATH; domain=SOMAIN_NAME;secure";

name:表示cookie的名稱  value 表示cookie的值， expires表示 時間期限， path 表示可以訪問cookie的路徑，domain表示可以訪問cookie的域 。

獲取cookie                    

用document.cookie 得到cookie, 得到一個字符串，讓後能夠經過split(";")將字符串中的鍵值對分開 得到相應的數值。

setCookie

  設置字符串的值，組成一個字符串 而後將字符串賦值給document.cookie.

deleteCookie

刪除cookie的策略是將cookie的有效期設置爲過時的。

2.3 檢查文檔狀態

document.readyState能夠查看當前文檔的變化，當文檔變化後就會觸發readystatechange事件。  

文檔加載的過程依次會經歷  loading   interactive complete 。在文檔加載階段 javascript就開始運行的，因此有時候須要檢查文檔是否加載完畢

（1）window.load 事件

當文檔加載完畢後會觸發window.load事件 定義相關的處理函數

（2）document.readystatechange 事件

定義處理函數 查看當前的document.readyState是否到complete狀態 再完成相應程序。

2.4 document.open                                                                                                                                                                          document.open()方法能夠打開一個新窗口 並加裝一個新的文檔，與window.open（）方法相投，可是document.open返回的是一個document對象，是對新窗口中的文檔的引用；而windown返回的是一個window.open對象，是對一個新的窗口的引用。

document.close()方法是不能夠關閉窗口，只能夠關閉文檔流。必須使用window.close。

2.5 向網頁中寫入內容

使用document.write()和document.writeln() 能夠將指定的字符串寫到當前的文檔中顯示，字符串也能夠包含HTML標籤。

二者的區別是：是否有換行；

當用這個方法後，若是使用document.close可讓寫入的內容呈如今網頁上，可是也不是必須的。

必須的時候：

（1）在使用open方法打開一個新窗口並向其中寫入內容，並且不是第一次對該窗口使用open方法。

（2）若是這兩個寫入方法位於事件處理函數中，必須使用document.close()方法關閉寫入流。

2.6 文檔能夠編輯

使用document.designMode屬性="on"表示整個文檔處於編輯狀態，

使用document.body.contenteditable="on" 表示全部元素處於編輯狀態。

 

2.7焦點管理

用戶可使用不少方法處理文檔的焦點，例如可使用window.blur() 和 window.focus() 也能夠對任何元素使用blur()和focus()方法。

在html5zhong 除了以上方法處理焦點，還可使用document.activeElement   // 返回當前焦點所在的元素，若是不在任何元素上 那麼返回body 元素。documnet.hasFocus()方法 // 能夠檢測焦點是否在文檔內。  document.defaultView 返回活動文檔的window對象。

 

2.8 編輯API

document.execCommand(commandId, showUI ,value)方法能夠執行這些命令

第一個參數是指定的動做，後面兩個參數能夠影響這個動做的執行。這些命令能夠修改字體加粗 傾斜 顏色等等。

eg:document.execCommand("false",false,choice.value);