JavaScript的DOM怎么弄-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“JavaScript的DOM怎么弄”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)丹徒免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

DOM的增加

DOM操作中增指的是增加節(jié)點，分為兩部分：創(chuàng)建節(jié)點和插入節(jié)點。

創(chuàng)建節(jié)點

創(chuàng)建節(jié)點中常用的API方法主要有：

1. document.createElement()：創(chuàng)建指定的HTML元素

2. document.createTextNode()：創(chuàng)建文本節(jié)點

3. document.createDocumentFrame()：創(chuàng)建文檔片段

4. document.createAttribute()：創(chuàng)建節(jié)點屬性

5. node.cloneNode()：克隆節(jié)點

插入節(jié)點###

插入節(jié)點常用的API方法主要有：

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

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

<div id="div1"><p id="p1">這是一個段落</p><p id="p2">這是另一個段落</p></div>

para.appendChild(node);

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

element.appendChild(para);</script>

例子解釋：

這段代碼創(chuàng)建新的 <p>元素：

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

如需向 <p>元素添加文本，您必須首先創(chuàng)建文本節(jié)點。這段代碼創(chuàng)建了一個文本節(jié)點：

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

然后您必須向 <p>元素追加這個文本節(jié)點：

para.appendChild(node);

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

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

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

element.appendChild(para);

關于document.createAttribute()

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

<p id="p1">這是一個段落</p>

<p id="p2">這是另一個段落</p>

</div>

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

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

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

關于node.cloneNode()

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

<p id="p1">這是一個段落</p>

<p id="p2">這是另一個段落</p>

</div>

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

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

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

DOM的刪除

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

注意事項：這個方法是要在被刪除的節(jié)點的父節(jié)點上調(diào)用的，而不是在被刪除節(jié)點上調(diào)用的，如果參數(shù)節(jié)點不是當前節(jié)點的子節(jié)點，removeChild 方法將報錯。

<div id="div1"><p id="p1">這是一個段落。</p><p id="p2">這是另一個段落。</p></div>

parent.removeChild(child);</script>

例子解釋：

這個 HTML 文檔含有擁有兩個子節(jié)點（兩個<p>元素）的 <div> 元素：

<div id="div1"><p id="p1">這是一個段落。</p><p id="p2">這是另一個段落。</p></div>

找到 id="div1"的元素：

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

找到id="p1" 的 <p> 元素：

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

從父元素中刪除子元素：

parent.removeChild(child);

DOM的修改

修改節(jié)點常用的API方法主要有：

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

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

3. replaceChild()：替換節(jié)點

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

DOM的查找

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

查找元素

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

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

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

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

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

節(jié)點查找

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

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

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

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

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

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

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

“JavaScript的DOM怎么弄”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)-成都網(wǎng)站建設公司網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

分享標題：JavaScript的DOM怎么弄-創(chuàng)新互聯(lián)
路徑分享：http://bm7419.com/article42/dihchc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、企業(yè)建站、網(wǎng)站設計、域名注冊、服務器托管、響應式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容