大家好，我是IT修真院深圳分院第02期學員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務2，深度思考中的知識點——常見DOM操作有哪些？
1.背景介紹
DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程序編程接口）。DOM描繪了一個層次化的節(jié)點樹，允許開發(fā)人員添加、移除和修改頁面的某一部分。DOM脫胎于Netscape及微軟公司創(chuàng)始的DHTML（動態(tài)HTML），但現(xiàn)在它已經(jīng)成為表現(xiàn)和操作頁面標記的真正的跨平臺、語言中立的方式。
2.知識剖析
2.1DOM是什么？
DOM是Document Object Model（文檔對象模型）的縮寫。DOM就是一個編程接口，就是一套API，是針對HTML文檔、XML等文檔的一套API。
DOM用來訪問或操作HTML文檔、XHTML文檔、XML文檔中的節(jié)點元素。JavaScript可以通過DOM來訪問和操作HTML文檔所有的元素。JavaScript是一種腳本語言，DOM是用來獲得和操作HTML文檔的節(jié)點屬性。JavaScript通常是通過DOM來獲得和操作HTML屬性的。
2.2什么是DOM節(jié)點？
HTML文檔中的所有內(nèi)容都是節(jié)點
整個文檔是一個文檔節(jié)點
每個HTML元素是元素節(jié)點
HTML元素內(nèi)的文本是文本節(jié)點
每個HTML屬性是屬性節(jié)點
注釋是注釋節(jié)點
3.常見問題
常見的DOM操作有哪些？
4.解決方案
4.1常用的查找節(jié)點的方法有：
document.getElementById('id屬性值');返回擁有指定id的對象的引用
document.getElementsByClassName('class屬性值');返回擁有指定class的對象集合
document.getElementsByTagName('標簽名');返回擁有指定標簽名的對象集合
4.2常用的新建節(jié)點的方法有：
document.createElement('元素名');創(chuàng)建新的元素節(jié)點
document.createAttribute('屬性名');創(chuàng)建新的屬性節(jié)點
document.createTextNode('文本內(nèi)容');創(chuàng)建新的文本節(jié)點
4.3常用的添加新節(jié)點的方法有：
1.element.setAttribute(attributeName, attributeValue );給元素增加指定屬性，并設定屬性值
2.element.setAttributeNode(attributeName );給元素增加屬性節(jié)點
3.如需向HTML DOM添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點），然后向一個已存在的元素追加該元素。
1)document.createTextNode('新增文本內(nèi)容');創(chuàng)建新的文本節(jié)點
2)parent.appendChild(創(chuàng)建的新節(jié)點);向父節(jié)點的最后一個子節(jié)點后追加新節(jié)點，或使用parent.insertBefore(newChild, existingChild );向父節(jié)點的某個特定子節(jié)點之前插入新節(jié)點
4.4常用的刪除節(jié)點的方法有：
parentNode.removeChild(existingChild );刪除已有的子節(jié)點，返回值為刪除節(jié)點
DOM需要清楚你需要刪除的元素，以及它的父元素。常用的解決方案：找到你希望刪除的子元素，然后使用其parentNode屬性來找到父元素：
var child=document.getElementById("p1");child.parentNode.removeChild(child);
4.5常用的修改節(jié)點的方法有：
parentNode.replaceChild(newChild, existingChild );用新節(jié)點替換父節(jié)點中已有的子節(jié)點
element.setAttribute(attributeName, attributeValue );給元素增加指定屬性，并設定屬性值(若原元素已有該節(jié)點，此操作能達到修改該屬性值的目的)
element.setAttributeNode(attributeName );給元素增加屬性節(jié)點(若原元素已有該節(jié)點，此操作能達到修改該屬性值的目的)
5.編碼實戰(zhàn)
6.更多討論
常見的DOM -事件又哪些？
onclick事件——當用戶點擊時
onload事件——用戶進入
onunload事件——用戶離開
onmouseover事件——鼠標移入
onmouseout事件——鼠標移出
onmousedown事件——鼠標按下
onmouseup事件——鼠標抬起
7.參考文獻
8.視頻資料
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
下期預告：如何使用Bootbox? 不見不散~
