一、背景介紹
什么是DOM？
DOM 是 Document Object Model（文檔對象模型）的縮寫。
DOM是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
在 HTML DOM中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
二、知識剖析
什么是DOM節點
HTML 文檔中的所有內容都是節點。
1、整個文檔是一個文檔節點 ；
2、每個 HTML 元素是元素節點 ；
3、HTML 元素內的文本是文本節點；
4、每個 HTML 屬性是屬性節點；
5、注釋是注釋節點。
三、常見問題
屬性是節點（HTML 元素）的值，您能夠獲取或設置。那么有哪些常見的DOM屬性？
四、解決方案
設置或返回表格行的開始和結束標簽之間的 HTML。
nodeName 屬性
規定節點的名稱。
1、元素節點的 nodeName 與標簽名相同 ；
2、屬性節點的 nodeName 與屬性名相同 ；
3、文本節點的 nodeName 始終是 #text ；
4、文檔節點的 nodeName 始終是 #document。
規定節點的值。
1、元素節點的 nodeValue 是 undefined 或 null ；
2、文本節點的 nodeValue 是文本本身 ；
3、屬性節點的 nodeValue 是屬性值。
五、編碼實戰
六、擴展思考
對元素的操作方法有哪些？
訪問元素的方法
1、通過使用getElementById()方法 ；
2、通過使用getElementByName() 方法；
3、通過使用getElementsByTagName() 方法；
4、通過使用getElementsByClassName() 方法。
修改元素的方法
1、改變Html的內容，如：document.getElementById("p1").innerHTML="New text!";
2、改變CSS的樣式，如：document.getElementById("p2").style.color="blue";
DOM事件
允許 JavaScript 對 HTML 事件作出反應
1、onclick 事件——當用戶點擊時
2、onload 事件——用戶進入
3、onunload 事件——用戶離開，如刷新頁面，提交表單，關閉窗口，關閉瀏覽器時觸發（這個事件在Chrome和Opera瀏覽器里并不支持）
4、onmouseover事件——鼠標移入
5、onmouseout事件——鼠標移出
6、onmousedown事件——鼠標按下
7、onmouseup 事件——鼠標抬起
七、更多討論
討論點一：DOM有什么缺點？
討論點二：如何獲取屬性節點的節點值？
討論點三：DOM中的property和attribute的區別是什么？
八、參考文獻
參考一：W3C
