大家好，我是IT修真院成都分院第10期學(xué)員李勁宏，一枚正直純潔善良的web程序員，今天給大家分享一下JS如何操作DOM累铅。
DOM（文檔對(duì)象模型）是針對(duì)HTML 和XML 文檔的一個(gè)API（應(yīng)用程序編程接口）。DOM描 繪了一個(gè)層次化的節(jié)點(diǎn)樹站叼，允許開發(fā)人員添加娃兽、移除和修改頁面的某一部分。DOM脫胎于 Netscape 及微軟公司創(chuàng)始的DHTML（動(dòng)態(tài)HTML）尽楔，但現(xiàn)在它已經(jīng)成為表現(xiàn)和操作頁面標(biāo)記的真正的跨 平臺(tái)投储、語言中立的方式。
1998 年10 月DOM１級(jí)規(guī)范成為W3C 的推薦標(biāo)準(zhǔn)阔馋，為基本的文檔結(jié)構(gòu)及查詢提供了接口玛荞。本章主 要討論與瀏覽器中的HTML頁面相關(guān)的DOM1級(jí)的特性和應(yīng)用，以及JavaScript 對(duì)DOM1級(jí)的實(shí)現(xiàn)呕寝。 IE勋眯、Firefox、Safari、Chrome 和Opera 都非常完善地實(shí)現(xiàn)了DOM客蹋。
什么是DOM
DOM 是 Document Object Model（文檔對(duì)象）
?DOM是中立于平臺(tái)和語言的接口塞蹭，它允許程序和腳本動(dòng)態(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)钧舌。整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn),每個(gè) HTML 元素是元素節(jié)點(diǎn)，
?HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)涎跨，每個(gè) HTML 屬性是屬性節(jié)點(diǎn)，注釋是注釋節(jié)點(diǎn)崭歧。
DOM常用操作
查找節(jié)點(diǎn)
新建節(jié)點(diǎn)
添加節(jié)點(diǎn)
刪除節(jié)點(diǎn)
修改節(jié)點(diǎn)
我們用到最多的是element類型隅很，用于表現(xiàn)HTML元素，提供了對(duì)元素標(biāo)簽名率碾、子節(jié)點(diǎn)及特性的訪問叔营。
>DOM常用操作舉例
查找節(jié)點(diǎn)
document.getElementById('id屬性值');
返回?fù)碛兄付╥d的第一個(gè)對(duì)象的引用
document/element.getElementsByClassName('class屬性值');
返回?fù)碛兄付╟lass的對(duì)象集合。
新建節(jié)點(diǎn)
document.createElement('元素名');
創(chuàng)建新的元素節(jié)點(diǎn)
document.createAttribute('屬性名');
創(chuàng)建新的屬性節(jié)點(diǎn)
document.createTextNode('文本內(nèi)容');
創(chuàng)建新的文本節(jié)點(diǎn)
document.createComment('注釋節(jié)點(diǎn)');
創(chuàng)建新的注釋節(jié)點(diǎn)
document.createDocumentFragment( );
創(chuàng)建文檔片段節(jié)點(diǎn)所宰。
>DOM常用操作
刪除節(jié)點(diǎn)
parentNode.removeChild( existingChild );
刪除已有的子節(jié)點(diǎn)绒尊，返回值為刪除節(jié)點(diǎn)
element.removeAttribute('屬性名');
刪除具有指定屬性名稱的屬性，無返回值
element.removeAttributeNode( attrNode );
刪除指定屬性仔粥，返回值為刪除的屬性婴谱。
DOM事件
允許 JavaScript 對(duì) HTML 事件作出反應(yīng)
onclick 事件——當(dāng)用戶點(diǎn)擊時(shí)
onload 事件——用戶進(jìn)入
onunload 事件——用戶離開
onmouseover事件——鼠標(biāo)移入
onmouseout事件——鼠標(biāo)移出
onmousedown事件——鼠標(biāo)按下
onmouseup 事件——鼠標(biāo)抬起。
