JavaScript是Web全棧學習的基礎，其中DOM樹的操作是非常常見的。下面讓我們跟隨無限互聯(lián)Web全棧培訓中心的老師一起了解一下“常見DOM樹操作”。

Web全棧培訓課程：常見DOM樹操作解析

XML是eXtensible Markup Language的縮寫，它是一種可擴展性標識語言, 能夠讓你自己創(chuàng)造標識，標識你所表示的內(nèi)容。DOM全稱是Document Object Model(文檔對象模型)，定義了一組與平臺和語言無關的接口，以便程序和腳本能夠動態(tài)訪問和修改XML文檔內(nèi)容、結構及樣式。XML創(chuàng)建了標識，而 DOM的作用就是告訴程序如何操作和顯示這些標識。 實際上XML將數(shù)據(jù)組織成為一棵樹，DOM經(jīng)過解析XML文檔，為XML文檔在邏輯上建立一個樹模型，樹的節(jié)點是一個個的對象。這樣經(jīng)過操作這棵樹和這些對象就可以完成對XML文檔的操作，為處理文檔的所有方面提供了一個完美的概念性框架。DOM是基于瀏覽器編程的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，單純的 Javascript要結合DOM才能做DHTML編程，才能做出漂亮的效果、應用于WEB。因此，必須要對DOM有一定的認識，才能把Javascript應用于WEB，或你的RIA應用當中，因為 DHTML本質(zhì)上就是操作DOM樹。

下圖為DOM的結構表示圖，這樣也許能夠幫助我們理解。

DOM樹結構表示圖

DOM樹的根統(tǒng)一為文檔根—document，DOM既然是樹狀結構，那么他們自然有如下的幾種關系:

◆根結點(document)

◆父結點(parentNode)

◆子結點(childNodes)

兄弟結點兄弟結點

(sibling)(sibling)

注：跨域除外，跨域通常是在操作frame上，簡單的說，就是兩個frame不屬于同一域名。

DOM樹的結構

DOM集合：

document.images 文檔中所有圖片集合

document.images[0] 等價document.images.item(0) 第1個圖片

document.images.length 元素長度

JavaScript獲取元素的三種方法：

document.getElementById()

document.getElementByTagName()

document.getElementByClassName()

Web全棧培訓課程：常見DOM樹操作解析

節(jié)點屬性:

nodeName

nodeValue

nodeType 值為1-12. 1是元素節(jié)點;2是屬性;3是文本節(jié)點

parentNode

childNode

firstNode

lastNode

previousSibling 前一個兄弟節(jié)點

nextSibling 后一個兄弟節(jié)點

attributes 屬性集合

Web全棧培訓課程：常見DOM樹操作解析

關于節(jié)點操作的方法：

createElement() 創(chuàng)建元素節(jié)點

createTextNode() 常見文本節(jié)點

createAttribute()創(chuàng)建屬性節(jié)點

appendChild() 追加子節(jié)點

insertBefore() 在指定子節(jié)點前插入新子節(jié)點

removeChild() 刪除子節(jié)點

replaceChild() 替換子節(jié)點

Web全棧培訓課程：常見DOM樹操作解析

關于屬性操作的方法：

getAttribute(attrName) 獲取屬性對應的值

setAttribute(attrName,value)

removeAttribute(attrName)

hasAttribute(attrName) 是否有某屬性

Web全棧培訓機構**無限互聯(lián)Web全棧培訓，Web全棧培訓引領者，專注Web全棧培訓，用心做靠譜的Web全棧培訓機構。

以上就是今天為各位總結的，而你想了解更多，提升你的web前端技術，可咨詢我們。

課程咨詢

咨詢老師：詹老師

咨詢電話：17706505315

咨詢QQ：1379180685

相關推薦