文檔對象模型（Document Object Model--DOM）

1.DOM

a) 允許腳本和程序動態讀取和更新文檔內容、結構和樣式的語言和平臺

b) 使用DOM操作HTML頁面可以不用每次從服務器傳輸整個頁面

c) DOM是針對HTML和XML的而應用程序接口

2.DOM結構

　　a) DOM的樹形結構

i.文檔中的所有元素都是樹的節點

ii.每個節點都是Node對象

iii.每種Node對象都定義了特定的屬性和方法

　　b) DOM內部對象常用屬性和方法

i.屬性

。attributes:如果是Entity、Notation則返回對應的Node；如果是Element則返回一個可以通過名字訪問的Node列表；其他類型返回null

。parentNode：返回當前節點的Node型的父節點；沒有則返回null

。childNodes：返回當前節點的子節點組成的NOde數組列表；沒有子節點則返回空數組

。firstChild：返回當前節點的Node類型的第一個子節點；沒有則返回null

。lastChild：返回當前節點的Node類型的最後一個子節點；沒有則返回null

。nextSibling：返回當前節點的Node型的下一個兄弟節點；沒有則返回null

。previousSibling：返回當前節點的Node型的前一個兄弟節點；沒有則返回null

。nodeName：返回當前節點的名字

。nodeType：返回當前節點的類型

ii.方法

。hasChildNodes()：判斷當前節點是否有子節點

。appendChild()：為當前節點添加一個子節點

。removeChild()：將指定節點的子節點刪除並返回

。replaceChild():返回被代替的子節點並用指定的子節點代替；如果指定的子節點為null或不存在，則直接將被替的子節點刪除

。insertBefore()：在當前節點的指定子節點之前添加一個子節點；如果指定的子節點不存在或為null，直接在指定節點的最後添加一個子節點

　　c) Element對象屬性

i.屬性

。id:返回當前元素的id

。innerHTML：返回當前元素的HTML標記內容

。innerText以文本形式返回當前元素的內容

。style：返回當前元素的樣式

。tagName：返回當前元素的標記名

ii.方法

。click():在當前元素上模擬鼠標單擊事件

。blur()：將鍵盤焦點從當前元素移開

。focus()：使當前元素獲得焦點

。hasAttribute()：如果指定的屬性存在則返回true否則false

。setAttribute():為元素添加指定的屬性

。getAttribute()：返回當前節點的指定屬性的Attr節點

。removeAttribute()：刪除指定屬性

。getElementByTagName()：返回指定標記名的元素數組

d) Document常用對象方法

i.Document節點是所有節點的根節點

ii.方法

。creatElement（）：根據指定元素名創建元素

。createAttribute（）：根據指定屬性名創建一個屬性節點，返回新的Attr對象

。createTextNode（）：創建一個文本元素

。getElementById（）:根據ID獲取元素

。getElementByName（）：返回指定名稱的元素列表

3.使用DOM處理頁面元素

　　a) 問題：無法用ID獲取元素

4.使用DOM處理表格

文檔對象模型（Document Object Model--DOM）