JavaScript DOM常用操作代碼匯總
1.理解DOM：
DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用編程接口。
怎么說，我從兩個角度理解：
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
所以說，有了DOM，在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節(jié)點，觸摸Html每寸肌膚。（咳。。。）
2.介紹Html的DOM樹：
說明：html標簽通過瀏覽器的解析后才會形成dom樹，此后HTML中的每個標簽元素，屬性，文本都能看做是一個DOM的節(jié)點，JavaScript都能通過dom的提供的編程接口操作到每個節(jié)點，去了解瀏覽器的渲染機制能夠幫助我們了解dom。
Html代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>dom</title></head><body> <div> <a href='http://m.b3g6.com/bcjs/www.baidu.com' rel='external nofollow' >百度</a> </div></body></html>
對應的DOM樹結構圖：
3.認識JavaScript中的DOM編程接口：
上面說了html形成的dom樹，接著說下通過js的dom編程接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節(jié)點：
document.getElementById(idName) //通過id號來獲取元素，返回一個元素對象 document.getElementsByName(name) //通過name屬性獲取id號，返回元素對象數(shù)組 document.getElementsByClassName(className) //通過class來獲取元素，返回元素對象數(shù)組（ie8以上才有） document.getElementsByTagName(tagName) //通過標簽名獲取元素，返回元素對象數(shù)組獲取/設置元素的屬性值：
element.getAttribute(attributeName) //括號傳入屬性名，返回對應屬性的屬性值 element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值創(chuàng)建節(jié)點Node：
document.createElement('h3') //創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例 document.createTextNode(String); //創(chuàng)建一個文本節(jié)點； document.createAttribute('class'); //創(chuàng)建一個屬性節(jié)點，這里以創(chuàng)建class屬性為例增添節(jié)點：
element.appendChild(Node); //往element內(nèi)部最后面添加一個節(jié)點，參數(shù)是節(jié)點類型 elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode刪除節(jié)點：
element.removeChild(Node) //刪除當前節(jié)點下指定的子節(jié)點，刪除成功返回該被刪除的節(jié)點，否則返回null
常用屬性:
獲取當前元素的父節(jié)點 ：
element.parentNode //返回當前元素的父節(jié)點對象
獲取當前元素的子節(jié)點：
element.chlidren //返回當前元素所有子元素節(jié)點對象，只返回HTML節(jié)點 element.chilidNodes //返回當前元素多有子節(jié)點，包括文本，HTML，屬性節(jié)點。（回車也會當做一個節(jié)點） element.firstChild //返回當前元素的第一個子節(jié)點對象 element.lastChild //返回當前元素的最后一個子節(jié)點對象獲取當前元素的同級元素：
element.nextSibling //返回當前元素的下一個同級元素 沒有就返回null element.previousSibling //返回當前元素上一個同級元素 沒有就返回null獲取當前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代碼 element.innerText //返回當前元素的自身及子代所有文本值，只是文本內(nèi)容，不包括html代碼獲取當前節(jié)點的節(jié)點類型：node.nodeType //返回節(jié)點的類型,數(shù)字形式（1-12）常見幾個1：元素節(jié)點，2：屬性節(jié)點，3：文本節(jié)點。
設置樣式：element.style.color=“#eea”; //設置元素的樣式時使用style，這里以設置文字顏色為例。
4.總結：
大家都會覺得用jQuery來操作dom會更加的方便且好用，因為jq對js的dom進行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結一下原生js的dom，從根本上了解js對dom的操作，只會有利而無害。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. 使用Blazor框架實現(xiàn)在前端瀏覽器中導入和導出Excel2. 為eclipse和IDEA配置tomcat服務器的方法3. 解決vue 給window添加和移除resize事件遇到的坑4. 如果我是國王：關于解決 Java 編程語言線程問題的建議5. 使用開源項目JAVAE2 進行視頻格式轉(zhuǎn)換6. ASP.NET MVC遍歷驗證ModelState的錯誤信息7. Python基于requests實現(xiàn)模擬上傳文件8. windows下java -jar 后臺運行以及殺死后臺進程的操作9. JavaScript實現(xiàn)留言板實戰(zhàn)案例10. python中文本字符處理的簡單方法記錄
網(wǎng)公網(wǎng)安備