大家好，我是IT修真院武漢分院第11期的學員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(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,更多討論
1，JavaScript的BOM和DOM有什么區(qū)別？
BOM是瀏覽器對象模型，用來獲取或設置瀏覽器的屬性、行為，例如：新建窗口、獲取屏幕分辨率、瀏覽器版本號等。
DOM是文檔對象模型，用來獲取或設置文檔中標簽的屬性，例如獲取或者設置input表單的value值。
2，DOM0級和DOM2級的區(qū)別？
0級DOM
主要分為2個：
一是在標簽內(nèi)寫onclick事件
//直接寫//調(diào)用 script 要寫在前面
二是在js寫onlicke=function(){}函數(shù)
document.getElementById("myButton").onclick =function(){? ? alert('thanks');}
2級DOM
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
addEventListener
removeEventListener
所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：
第一個參數(shù)是事件名（如click）；
第二個參數(shù)是事件處理程序函數(shù)；
第三個參數(shù)如果是true則表示在捕獲階段調(diào)用，為false表示在冒泡階段調(diào)用。
addEventListener():可以為元素添加多個事件處理程序，觸發(fā)時會按照添加順序依次調(diào)用。
removeEventListener():不能移除匿名添加的函數(shù)。
3，什么是DOM事件流？
DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
