大家好，我是IT修真院北京分院web第31期學(xué)員金立劍
【js-6】DOM有哪些操作
1.背景介紹
什么是DOM？
DOM全稱是Document Object Model(文檔對象模型)，是為HTML和XML提供的API尝抖。那么為什么DOM可以同時(shí)提供給HTML和XML編程接口。雖然他們用來標(biāo)記的標(biāo)簽不同，但是他們本質(zhì)的結(jié)構(gòu)是相同的秉颗。換句話說，按照DOM的標(biāo)準(zhǔn)送矩，HTML和XML都是以標(biāo)簽為結(jié)點(diǎn)構(gòu)造的樹結(jié)構(gòu)蚕甥，DOM將HTML和XML的相同的結(jié)構(gòu)本質(zhì)抽象出來，然后通過腳本語言益愈，如Javascript梢灭，按照DOM里的模型標(biāo)準(zhǔn)訪問和操作文檔內(nèi)容。
在Chrome瀏覽器端蒸其，單擊右鍵打開View Page Source展示文檔結(jié)構(gòu)敏释。通過這種方式可以直觀的看到文檔當(dāng)前的內(nèi)容和結(jié)構(gòu)。DOM則不同摸袁，它是提供一個(gè)API給編程語言钥顽，比如Javascript，通過一系列抽象的方法操作文檔的內(nèi)容靠汁，結(jié)構(gòu)和樣式蜂大。
DOM的組成
對于XML應(yīng)用開發(fā)來說，DOM就是一個(gè)對象化的XML數(shù)據(jù)接口蝶怔，一個(gè)與語言無關(guān)奶浦、與平臺(tái)無關(guān)的標(biāo)準(zhǔn)接口規(guī)范。
DOM定義了HTML文檔和XML文檔的邏輯結(jié)構(gòu)踢星，給出了一種訪問和處理這兩種文檔的方法澳叉。文檔代表的是數(shù)據(jù)，而DOM則代表了如何去處理這些數(shù)據(jù)沐悦。
作為W3C的標(biāo)準(zhǔn)接口規(guī)范成洗，目前，DOM由三部分組成藏否，包括：核心（core）瓶殃、HTML接口和XML接口。
核心部分是結(jié)構(gòu)化文檔比較底層對象的集合副签，這一部分所定義的對象已經(jīng)完全可以表達(dá)出任何HTML和XML文檔中的數(shù)據(jù)了遥椿。
HTML接口和XML接口兩部分則是專為操作具體HTML文檔和XML文檔所提供的高級接口基矮。
DOM樹
2.知識(shí)剖析
DOM的四個(gè)基本接口
在DOM接口規(guī)范中，有四個(gè)基本的接口：Document, Node, NodeList, NamedNodeMap修壕。
Document:Document接口是對文檔進(jìn)行操作的入口愈捅，它是從Node接口繼承過來的。
Node:Node接口是其他大多數(shù)接口的父類慈鸠。 在DOM樹中蓝谨，Node接口代表了樹中的一個(gè)節(jié)點(diǎn)青团。
常見的DOM操作
1.查找節(jié)點(diǎn)
document.getElementById('id屬性值'); 返回?fù)碛兄付╥d的第一個(gè)對象的引用
document/element.getElementsByClassName('class屬性值'); 返回?fù)碛兄付╟lass的對象集合
document/element.getElementsByTagName('標(biāo)簽名'); 返回?fù)碛兄付?biāo)簽名的對象集合
document.getElementsByName('name屬性值'); 返回?fù)碛兄付Q的對象結(jié)合
document/element.querySelector('CSS選擇器'); 僅返回第一個(gè)匹配的元素
document/element.querySelectorAll('CSS選擇器'); 返回所有匹配的元素
document.documentElement; 獲取頁面中的HTML標(biāo)簽
document.body; 獲取頁面中的BODY標(biāo)簽
document.all['']; 獲取頁面中的所有元素節(jié)點(diǎn)的對象集合型
2.創(chuàng)建節(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)
3.刪除節(jié)點(diǎn)
parentNode.removeChild( existingChild );刪除已有的子節(jié)點(diǎn)，返回值為刪除節(jié)點(diǎn)
element.removeAttribute('屬性名');刪除具有指定屬性名稱的屬性督笆，無返回值
element.removeAttributeNode( attrNode );刪除指定屬性，返回值為刪除的屬性
4.修改節(jié)點(diǎn)
parentNode.replaceChild( newChild, existingChild );用新節(jié)點(diǎn)替換父節(jié)點(diǎn)中已有的子節(jié)點(diǎn)
element.setAttributeNode( attributeName );若原元素已有該節(jié)點(diǎn)娃肿，此操作能達(dá)到修改該屬性值的目的
element.setAttribute( attributeName, attributeValue );若原元素已有該節(jié)點(diǎn)咕缎，此操作能達(dá)到修改該屬性值的目的
5.插入節(jié)點(diǎn)
parent.appendChild( element/txt/comment/fragment );向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)
parent.insertBefore( newChild, existingChild );向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
element.setAttributeNode( attributeName );給元素增加屬性節(jié)點(diǎn)
element.setAttribute( attributeName, attributeValue );給元素增加指定屬性料扰，并設(shè)定屬性值
6.設(shè)置樣式
ele.style.styleName = styleValue;設(shè)置ele元素的CSS樣式
3.常見問題
DOM 和 HTML是一回事嗎凭豪？
DOM 和 JavaScript什么關(guān)系晒杈？
書寫細(xì)節(jié)
4.解決方案
DOM 和 HTML是一回事嗎嫂伞？
就像很多人把JQuery和Javascript的本質(zhì)搞混一樣，DOM和HTML也完全不是一回事拯钻，DOM是一個(gè)API帖努，HTML(Hyper Text Markup Language)則是一種標(biāo)記語言粪般，HTML在DOM的模型標(biāo)準(zhǔn)中被視為對象，DOM只提供編程接口亩歹，卻無法實(shí)際操作HTML里面的內(nèi)容。
但是前端工程師捆憎，一般在瀏覽器端操作HTML梭纹。每個(gè)Web瀏覽器都會(huì)使用DOM，所以頁面可以被腳本語言訪問变抽。而所有的瀏覽器都是以Javascript作為默認(rèn)的腳本語言氮块。所以HTML在瀏覽器端基本上可以直接通過DOM模型來操作诡宗，通過script標(biāo)簽載入或者直接插入Javascript腳本滔蝉，通過DOM直接操作瀏覽器端的HTML文件塔沃。正是這種無縫融合，導(dǎo)致DOM和HTML的概念很容易混淆螃概。
DOM 和 JAVASCRIPT什么關(guān)系？
Javascript可以通過DOM直接訪問和操作網(wǎng)頁文檔的內(nèi)容吊洼，一開始制肮，DOM是為方便Javascript操作設(shè)計(jì)的API。但其實(shí)發(fā)展到后來豺鼻，他們是兩個(gè)獨(dú)立的個(gè)體。而且Javascript不是唯一可以使用DOM的編程語言拘领，比如python也可以訪問DOM。所以DOM不是提供給Javascript的API届良，也不是Javascript里的API圣猎。但JavaScript可以通過DOM訪問和操作HTML和XML文檔內(nèi)容士葫。
書寫細(xì)節(jié)
只有查找ID時(shí)element不加s送悔，對新人來說要是不注意細(xì)節(jié)很可能會(huì)書寫錯(cuò)誤，導(dǎo)致一時(shí)半會(huì)兒找不到錯(cuò)誤所在
getElementById
getElementsByClassName
5.代碼實(shí)戰(zhàn)
6.拓展思考
如何簡化寫法荚藻？
新人可能要思考一些時(shí)間，對于我們已經(jīng)入門的來說通過jQuery即可簡化寫法应狱。
7.參考文獻(xiàn)
參考一:JavaScript高級程序設(shè)計(jì)
8.更多討論
①鼠標(biāo)事件有哪些祠丝？
1除嘹、onclick 事件——當(dāng)用戶點(diǎn)擊時(shí)
2岸蜗、onload 事件——用戶進(jìn)入
3尉咕、onunload 事件——用戶離開璃岳，如刷新頁面年缎，提交表單，關(guān)閉窗口矾睦，關(guān)閉瀏覽器時(shí)觸發(fā)（這個(gè)事件在Chrome和Opera瀏覽器里并不支持）
4、onmouseover事件——鼠標(biāo)移入
5缓溅、onmouseout事件——鼠標(biāo)移出
6赁温、onmousedown事件——鼠標(biāo)按下
7、onmouseup 事件——鼠標(biāo)抬起
②如何獲取相鄰的節(jié)點(diǎn)股囊？
neborNode.previousSibling :獲取已知節(jié)點(diǎn)的相鄰的上一個(gè)節(jié)點(diǎn)
nerbourNode.nextSlbling: 獲取已知節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
③可以復(fù)制節(jié)點(diǎn)么？
cloneNode(true | false);復(fù)制某個(gè)節(jié)點(diǎn)
參數(shù)：是否復(fù)制原節(jié)點(diǎn)的所有屬性
