大家好，我是IT修真院北京分院第23期的學(xué)員郭婷婷冠息，一枚正直純潔善良的WEB前端程序員挪凑。今天給大家分享一下，常見Dom操作有哪些?
分享人：郭婷婷?
1.背景介紹
DOM（文檔對象模型）是針對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)記的真正的跨平臺、語言中立的方式杭抠。
2.知識剖析
DOM是什么脸甘？
DOM 是 Document Object Model（文檔對象模型）的縮寫。DOM就是一個(gè)編程接口偏灿，就是一套API丹诀，是針對HTML文檔、XML等文檔的一套API。
DOM用來訪問或操作HTML文檔铆遭、XHTML文檔硝桩、XML文檔中的節(jié)點(diǎn)元素。JavaScript 可以通過 DOM 來訪問和操作HTML文檔所有的元素枚荣。JavaScript是一種腳本語言碗脊，DOM是用來獲得和操作HTML文檔的節(jié)點(diǎn)屬性。JavaScript通常是通過DOM來獲得和操作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)
上圖是一個(gè)html文件，也就是網(wǎng)頁的結(jié)構(gòu)害碾。
html標(biāo)簽是一個(gè)節(jié)點(diǎn)（Node）矢劲。
head、title慌随、body芬沉、p標(biāo)簽都是節(jié)點(diǎn)。
嵌套其他節(jié)點(diǎn)的節(jié)點(diǎn)叫做父節(jié)點(diǎn)阁猜。
被嵌套的節(jié)點(diǎn)叫做子節(jié)點(diǎn)花嘶。
同一個(gè)父節(jié)點(diǎn)下的節(jié)點(diǎn)叫做兄弟節(jié)點(diǎn)。
父親的父親以及上溯十八代祖宗叫做祖先節(jié)點(diǎn)蹦漠。
兒子的兒子以及子子孫孫無窮匱也叫做后代節(jié)點(diǎn)椭员。
3.常見問題
常見的DOM操作有哪些？
1.查找節(jié)點(diǎn)
2.新建節(jié)點(diǎn)
3.添加新節(jié)點(diǎn)
4.刪除節(jié)點(diǎn)
5.修改節(jié)點(diǎn)
4.解決方案
Document
當(dāng)瀏覽器下載到一個(gè)網(wǎng)頁笛园，通常是 HTML隘击，這個(gè) HTML 就叫 document（當(dāng)然，這也是 DOM 樹中的一個(gè) node）研铆，
從上圖可以看到埋同，document 通常是整個(gè) DOM 樹的根節(jié)點(diǎn)。這個(gè) document 包含了標(biāo)題（document.title）棵红、URL（document.URL）等屬性凶赁，可以直接在 JS 中訪問到。
在 JS 中逆甜，可以通過 document 訪問其子節(jié)點(diǎn)（其實(shí)任何節(jié)點(diǎn)都可以）虱肄，如
document.body;
document.getElementById('xxx');常用的查找節(jié)點(diǎn)的方法有：
document.getElementById('id屬性值');返回?fù)碛兄付╥d的對象的引用
document.getElementsByClassName('class屬性值');返回?fù)碛兄付╟lass的對象集合
document.getElementsByTagName('標(biāo)簽名');返回?fù)碛兄付?biāo)簽名的對象集合
常用的新建節(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)
常用的添加新節(jié)點(diǎn)的方法有：
如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)）交煞，然后向一個(gè)已存在的元素追加該元素咏窿。
1)parent.appendChild( 創(chuàng)建的新節(jié)點(diǎn) );向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)
2)parent.insertBefore( newChild, existingChild );向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
常用的刪除節(jié)點(diǎn)的方法有：
parentNode.removeChild( existingChild );刪除已有的子節(jié)點(diǎn)，返回值為刪除節(jié)點(diǎn)
常用的修改節(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.更多討論
常見的DOM - 事件又哪些？
onclick 事件——當(dāng)用戶點(diǎn)擊時(shí)
onload 事件——用戶進(jìn)入
onunload 事件——用戶離開
onmouseover事件——鼠標(biāo)移入
onmouseout事件——鼠標(biāo)移出
onmousedown事件——鼠標(biāo)按下
onmouseup 事件——鼠標(biāo)抬起
HTML DOM 事件
7.參考文獻(xiàn)
DOM, DOCUMENT, BOM, WINDOW 有什么區(qū)別?
8怜珍、更多討論
1、DOM和BOM有什么區(qū)別凤粗？
DOM 是為了操作文檔出現(xiàn)的 API绘面，document 是其的一個(gè)對象；
BOM 是為了操作瀏覽器出現(xiàn)的 API侈沪，window 是其的一個(gè)對象。
2晚凿、所有節(jié)點(diǎn)都有子節(jié)點(diǎn)嗎亭罪？
這個(gè)不一定，比如文本節(jié)點(diǎn)歼秽。
3应役、getElementById()、querySelector()燥筷、querySelectorAll()獲取節(jié)點(diǎn)的方法有什么區(qū)別箩祥？
query選擇符選出來的元素及元素?cái)?shù)組是靜態(tài)的，而getElement這種方法選出的元素是動(dòng)態(tài)的肆氓。querySelector()是用于接收一個(gè)CSS選擇符袍祖，返回與該模式匹配的第一個(gè)元素；querySelectorAll()用于選擇匹配到的所有元素谢揪。
鳴謝
感謝大家觀看
BY :|黃源志|郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-02-DOM.html#/
視頻鏈接: https://v.qq.com/x/page/i0513cuidb0.html
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師蕉陋，現(xiàn)在開始，找個(gè)師兄拨扶，帶你入門凳鬓，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷没济瘢”缩举。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線匹颤，學(xué)習(xí)透明化仅孩，成長可見化，師兄1對1免費(fèi)指導(dǎo)印蓖「芮猓快來與我一起學(xué)習(xí)吧?！
