JavaScript DOM常用操作代碼匯總
1.理解DOM：
DOM（Document Object Model ，文檔對(duì)象模型）一種獨(dú)立于語(yǔ)言，用于操作xml，html文檔的應(yīng)用編程接口。
怎么說(shuō)，我從兩個(gè)角度理解：
對(duì)于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對(duì)于Html，dom使得html形成一棵dom樹(shù)，類(lèi)似于一顆家族樹(shù)一樣，一層接一層，子子孫孫。
所以說(shuō)，有了DOM，在我看來(lái)就是相當(dāng)于JavaScript拿到了鑰匙一樣可以去操作Html的每一個(gè)節(jié)點(diǎn)，觸摸Html每寸肌膚。（咳。。。）
2.介紹Html的DOM樹(shù)：
說(shuō)明：html標(biāo)簽通過(guò)瀏覽器的解析后才會(huì)形成dom樹(shù)，此后HTML中的每個(gè)標(biāo)簽元素，屬性，文本都能看做是一個(gè)DOM的節(jié)點(diǎn)，JavaScript都能通過(guò)dom的提供的編程接口操作到每個(gè)節(jié)點(diǎn)，去了解瀏覽器的渲染機(jī)制能夠幫助我們了解dom。
Html代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>dom</title></head><body> <div> <a href='http://m.4tl426be.cn/bcjs/www.baidu.com' rel='external nofollow' >百度</a> </div></body></html>
對(duì)應(yīng)的DOM樹(shù)結(jié)構(gòu)圖：
3.認(rèn)識(shí)JavaScript中的DOM編程接口：
上面說(shuō)了html形成的dom樹(shù)，接著說(shuō)下通過(guò)js的dom編程接口去操作這棵dom樹(shù)。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節(jié)點(diǎn)：
document.getElementById(idName) //通過(guò)id號(hào)來(lái)獲取元素，返回一個(gè)元素對(duì)象 document.getElementsByName(name) //通過(guò)name屬性獲取id號(hào)，返回元素對(duì)象數(shù)組 document.getElementsByClassName(className) //通過(guò)class來(lái)獲取元素，返回元素對(duì)象數(shù)組（ie8以上才有） document.getElementsByTagName(tagName) //通過(guò)標(biāo)簽名獲取元素，返回元素對(duì)象數(shù)組獲取/設(shè)置元素的屬性值：
element.getAttribute(attributeName) //括號(hào)傳入屬性名，返回對(duì)應(yīng)屬性的屬性值 element.setAttribute(attributeName,attributeValue) //傳入屬性名及設(shè)置的值創(chuàng)建節(jié)點(diǎn)Node：
document.createElement('h3') //創(chuàng)建一個(gè)html元素，這里以創(chuàng)建h3元素為例 document.createTextNode(String); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)； document.createAttribute('class'); //創(chuàng)建一個(gè)屬性節(jié)點(diǎn)，這里以創(chuàng)建class屬性為例增添節(jié)點(diǎn)：
element.appendChild(Node); //往element內(nèi)部最后面添加一個(gè)節(jié)點(diǎn)，參數(shù)是節(jié)點(diǎn)類(lèi)型 elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode刪除節(jié)點(diǎn)：
element.removeChild(Node) //刪除當(dāng)前節(jié)點(diǎn)下指定的子節(jié)點(diǎn)，刪除成功返回該被刪除的節(jié)點(diǎn)，否則返回null
常用屬性:
獲取當(dāng)前元素的父節(jié)點(diǎn) ：
element.parentNode //返回當(dāng)前元素的父節(jié)點(diǎn)對(duì)象
獲取當(dāng)前元素的子節(jié)點(diǎn)：
element.chlidren //返回當(dāng)前元素所有子元素節(jié)點(diǎn)對(duì)象，只返回HTML節(jié)點(diǎn) element.chilidNodes //返回當(dāng)前元素多有子節(jié)點(diǎn)，包括文本，HTML，屬性節(jié)點(diǎn)。（回車(chē)也會(huì)當(dāng)做一個(gè)節(jié)點(diǎn)） element.firstChild //返回當(dāng)前元素的第一個(gè)子節(jié)點(diǎn)對(duì)象 element.lastChild //返回當(dāng)前元素的最后一個(gè)子節(jié)點(diǎn)對(duì)象獲取當(dāng)前元素的同級(jí)元素：
element.nextSibling //返回當(dāng)前元素的下一個(gè)同級(jí)元素 沒(méi)有就返回null element.previousSibling //返回當(dāng)前元素上一個(gè)同級(jí)元素 沒(méi)有就返回null獲取當(dāng)前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代碼 element.innerText //返回當(dāng)前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼獲取當(dāng)前節(jié)點(diǎn)的節(jié)點(diǎn)類(lèi)型：node.nodeType //返回節(jié)點(diǎn)的類(lèi)型,數(shù)字形式（1-12）常見(jiàn)幾個(gè)1：元素節(jié)點(diǎn)，2：屬性節(jié)點(diǎn)，3：文本節(jié)點(diǎn)。
設(shè)置樣式：element.style.color=“#eea”; //設(shè)置元素的樣式時(shí)使用style，這里以設(shè)置文字顏色為例。
4.總結(jié)：
大家都會(huì)覺(jué)得用jQuery來(lái)操作dom會(huì)更加的方便且好用，因?yàn)閖q對(duì)js的dom進(jìn)行了封裝，使得我們Write Less, Do More。但是我覺(jué)得還是要總結(jié)一下原生js的dom，從根本上了解js對(duì)dom的操作，只會(huì)有利而無(wú)害。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 如何利用python操作注冊(cè)表2. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令3. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理4. jsp文件下載功能實(shí)現(xiàn)代碼5. 詳解瀏覽器的緩存機(jī)制6. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享7. phpstudy apache開(kāi)啟ssi使用詳解8. 如何在jsp界面中插入圖片9. xml中的空格之完全解說(shuō)10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
網(wǎng)公網(wǎng)安備