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