JavaScript-DOM如何操作？看完本文就明白了-創新互聯

DOM，即文檔對象模型，是W3C組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口(API),它可以動態地訪問程序和腳本,更新其內容、結構和www文檔的風格，DOM的重要性不言而喻，今天我們就來學習一下JavaScript中DOM的操作方法。

創新互聯公司是專業的欽南網站建設公司，欽南接單;提供成都網站設計、網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行欽南網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

DOM的增加

DOM操作中增指的是增加節點，分為兩部分：創建節點和插入節點。

創建節點

創建節點中常用的API方法主要有：

1.?document.createElement()：創建指定的HTML元素

2.?document.createTextNode()：創建文本節點

3.?document.createDocumentFrame()：創建文檔片段

4.?document.createAttribute()：創建節點屬性

5.?node.cloneNode()：克隆節點

插入節點###

插入節點常用的API方法主要有：

1.?node.appendChild()：末尾追加一個新節點

2.?node.insertBefore()：插入一個新節點

這是一個段落

這是另一個段落

例子解釋：

這段代碼創建新的

元素：

var?para=document.createElement("p");

如需向

元素添加文本，您必須首先創建文本節點。這段代碼創建了一個文本節點：

var?node=document.createTextNode("這是新段落。");

然后您必須向

元素追加這個文本節點：

para.appendChild(node);

最后您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素：

var?element=document.getElementById("div1");

這段代碼向這個已有的元素追加新元素：

element.appendChild(para);

關于document.createAttribute()

document.createAttribute()?方法創建并返回一個新的屬性節點。但是這個方法不是很常用，如果涉及到創建屬性，一般使用node.setAttribute()?。

這是一個段落

這是另一個段落

var?node = document.getElementById('div1');var?newAttr = document.createAttribute('title'); ?//創建一個新的title屬性；

newAttr .nodeValue ='Hello world!'; ?//title屬性的值是：Hello world!

node.setAttributeNode(attr);//運用到對應的元素節點上

關于node.cloneNode()

node.cloneNode(deep)?方法返回該節點的一個副本，deep?可選，表明是否采用深度克隆，如果為true?，則該節點的所有后代節點也都會被克隆，否則，只克隆該節點本身。

這是一個段落

這是另一個段落

var?node = document.getElementById('div1');var?cloneNode = node.cloneNode(true);//克隆div1整個節點；

cloneNode.id ="div2";//修改克隆的節點id名稱為div2；

document.body.appendChild(cloneNode);//在網頁中追加克隆的節點；

DOM的刪除

DOM節點的刪除主要API是node.removeChild();可以使用parentNode.removeChild(child)刪除指定父節點parentNode的一個子節點child，并返回被刪除的節點。

注意事項：這個方法是要在被刪除的節點的父節點上調用的，而不是在被刪除節點上調用的，如果參數節點不是當前節點的子節點，removeChild?方法將報錯。

這是一個段落。

這是另一個段落。

例子解釋：

這個 HTML 文檔含有擁有兩個子節點（兩個

元素）的

?元素：

這是一個段落。

這是另一個段落。

找到id="div1"的元素：

var?parent=document.getElementById("div1");

找到id="p1" 的?

元素：

var?child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

DOM的修改

修改節點常用的API方法主要有：

1.?appendChild()：末尾追加一個新節點

2.?insertBefore()：插入一個新節點

3.?replaceChild()：替換節點

注意事項：以上幾個方法都是操作的某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點。另外并不是所有節點都有子節點，如果在不支持子節點的節點上，調用了這些方法，將會導致錯誤。

DOM的查找

DOM節點中的查主要包括：查找元素和節點查找。

查找元素

1.?getElementById()?--- 通過ID訪問；

2.?getElementsByClassName()?--- 通過類名訪問；

3.?getElementsByTagName()?--- 通過標簽名稱訪問；

4.?querySelector()?--- 通過CSS選擇器訪問（單個）；

5.?querySelectorAll()?--- 通過CSS選擇器訪問（所有）；

關于這一節的內容，可以訪問上一篇文章：JavaScript-DOM訪問方式

節點查找

所有的節點都有這些屬性，都是可以用于訪問相關的node節點：

1.?Node.childNodes: 訪問一個單元素下所有的直接子節點元素，可以是一個可循環的類數組對象。該節點集合可以保護不同的類型的子節點（比如text節點或其他元素節點）。

2.?Node.firstChild: 與childNodes數組的第一個項(Element.childNodes[0])是同樣的效果，僅僅是快捷方式。

3.?Node.lastChild: 與childNodes數組的最后一個項(Element.childNodes[Element.childNodes.length-1])是同樣的效果，僅僅是快捷方式。

4.?Node.parentNode: 訪問當前節點的父節點，父節點只能有一個，祖節點可以用Node.parentNode.parentNode?的形式來訪問。

5.?Node.nextSibling: 訪問DOM樹上與當前節點同級別的下一個節點。

6.?Node.previousSibling: 訪問DOM樹上與當前節點同級別的上一個節點。

總結

DOM操作在JavaScript還是很重要的，簡單點說，所有的交互操作都是基于DOM來操作的。而DOM中的操作，最為熟悉的就是對DOM的增、刪、改、查。今天的內容也就圍繞著這幾個方面展開學習。

另外有需要云服務器可以了解下創新互聯cdcxhl.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：JavaScript-DOM如何操作？看完本文就明白了-創新互聯
文章起源：http://www.xueling.net.cn/article/hppos.html