大家好秀睛，我是IT修真院武漢分院第11期的學(xué)員，一枚正直純潔善良的前端程序員莲祸，今天給大家分享一下蹂安，修真院官網(wǎng)js任務(wù)2，深度思考中的知識(shí)點(diǎn)——常見(jiàn)的Dom操作有哪些锐帜？
1.背景介紹
DOM（文檔對(duì)象模型）是針對(duì)HTML和XML文檔的一個(gè)API（應(yīng)用程序編程接口）藤抡。
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)，允許開(kāi)發(fā)人員添加抹估、移除和修改頁(yè)面的某一部分。DOM脫胎于Netscape及微軟公司創(chuàng)始的DHTML（動(dòng)態(tài)HTML）弄兜，但現(xiàn)在它已經(jīng)成為表現(xiàn)和操作頁(yè)面標(biāo)記的真正的跨平臺(tái)药蜻、語(yǔ)言中立的方式。
2.知識(shí)剖析
2.1DOM是什么替饿？
DOM是Document Object Model（文檔對(duì)象模型）的縮寫(xiě)语泽。DOM就是一個(gè)編程接口，就是一套API视卢，是針對(duì)HTML文檔踱卵、XML等文檔的一套API。
DOM用來(lái)訪問(wèn)或操作HTML文檔据过、XHTML文檔惋砂、XML文檔中的節(jié)點(diǎn)元素。JavaScript可以通過(guò)DOM來(lái)訪問(wèn)和操作HTML文檔所有的元素绳锅。JavaScript是一種腳本語(yǔ)言西饵，DOM是用來(lái)獲得和操作HTML文檔的節(jié)點(diǎn)屬性。JavaScript通常是通過(guò)DOM來(lái)獲得和操作HTML屬性的鳞芙。
2.2什么是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)
3.常見(jiàn)問(wèn)題
常見(jiàn)的DOM操作有哪些？
4.解決方案
4.1常用的查找節(jié)點(diǎn)的方法有：
document.getElementById('id屬性值');返回?fù)碛兄付╥d的對(duì)象的引用
document.getElementsByClassName('class屬性值');返回?fù)碛兄付╟lass的對(duì)象集合
document.getElementsByTagName('標(biāo)簽名');返回?fù)碛兄付?biāo)簽名的對(duì)象集合
4.2常用的新建節(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)
4.3常用的添加新節(jié)點(diǎn)的方法有：
1.element.setAttribute(attributeName, attributeValue );給元素增加指定屬性原朝，并設(shè)定屬性值
2.element.setAttributeNode(attributeName );給元素增加屬性節(jié)點(diǎn)
3.如需向HTML DOM添加新元素驯嘱，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素喳坠。
1)document.createTextNode('新增文本內(nèi)容');創(chuàng)建新的文本節(jié)點(diǎn)
2)parent.appendChild(創(chuàng)建的新節(jié)點(diǎn));向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)鞠评，或使用parent.insertBefore(newChild, existingChild );向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
4.4常用的刪除節(jié)點(diǎn)的方法有：
parentNode.removeChild(existingChild );刪除已有的子節(jié)點(diǎn)，返回值為刪除節(jié)點(diǎn)
DOM需要清楚你需要?jiǎng)h除的元素壕鹉，以及它的父元素谢澈。常用的解決方案：找到你希望刪除的子元素煌贴，然后使用其parentNode屬性來(lái)找到父元素：
var child=document.getElementById("p1");child.parentNode.removeChild(child);
4.5常用的修改節(jié)點(diǎn)的方法有：
parentNode.replaceChild(newChild, existingChild );用新節(jié)點(diǎn)替換父節(jié)點(diǎn)中已有的子節(jié)點(diǎn)
element.setAttribute(attributeName, attributeValue );給元素增加指定屬性，并設(shè)定屬性值(若原元素已有該節(jié)點(diǎn)锥忿，此操作能達(dá)到修改該屬性值的目的)
element.setAttributeNode(attributeName );給元素增加屬性節(jié)點(diǎn)(若原元素已有該節(jié)點(diǎn)牛郑，此操作能達(dá)到修改該屬性值的目的)
5.編碼實(shí)戰(zhàn)
6.拓展思考
常見(jiàn)的DOM -事件又哪些？
onclick事件——當(dāng)用戶點(diǎn)擊時(shí)
onload事件——用戶進(jìn)入
onunload事件——用戶離開(kāi)
onmouseover事件——鼠標(biāo)移入
onmouseout事件——鼠標(biāo)移出
onmousedown事件——鼠標(biāo)按下
onmouseup事件——鼠標(biāo)抬起
7.參考文獻(xiàn)
8,更多討論
1淹朋，JavaScript的BOM和DOM有什么區(qū)別？
BOM是瀏覽器對(duì)象模型钉答，用來(lái)獲取或設(shè)置瀏覽器的屬性础芍、行為，例如：新建窗口数尿、獲取屏幕分辨率仑性、瀏覽器版本號(hào)等。
DOM是文檔對(duì)象模型右蹦，用來(lái)獲取或設(shè)置文檔中標(biāo)簽的屬性诊杆，例如獲取或者設(shè)置input表單的value值。
2何陆，DOM0級(jí)和DOM2級(jí)的區(qū)別晨汹？
0級(jí)DOM
主要分為2個(gè)：
一是在標(biāo)簽內(nèi)寫(xiě)onclick事件
//直接寫(xiě)//調(diào)用 script 要寫(xiě)在前面
二是在js寫(xiě)onlicke=function(){}函數(shù)
document.getElementById("myButton").onclick =function(){? ? alert('thanks');}
2級(jí)DOM
DOM2級(jí)事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：
addEventListener
removeEventListener
所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受三個(gè)參數(shù)：
第一個(gè)參數(shù)是事件名（如click）贷盲；
第二個(gè)參數(shù)是事件處理程序函數(shù)淘这；
第三個(gè)參數(shù)如果是true則表示在捕獲階段調(diào)用，為false表示在冒泡階段調(diào)用巩剖。
addEventListener():可以為元素添加多個(gè)事件處理程序铝穷，觸發(fā)時(shí)會(huì)按照添加順序依次調(diào)用。
removeEventListener():不能移除匿名添加的函數(shù)佳魔。
3氧骤，什么是DOM事件流饲化？
DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段戳稽，事件捕獲階段，處于目標(biāo)階段沿彭，事件冒泡階段镊尺，首先發(fā)生的是事件捕獲朦佩，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件庐氮，最后是冒泡階段
感謝大家觀看
今天的分享就到這里啦语稠，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言仙畦、拍磚~
