DOM在JavaScript的應(yīng)用-創(chuàng)新互聯(lián)

DOM= Document Object Model，文檔對(duì)象模型，DOM可以以一種獨(dú)立于平臺(tái)和語(yǔ)言的方式訪問(wèn)和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說(shuō)，這是表示和處理一個(gè)HTML或XML文檔的常用方法。有一點(diǎn)很重要，DOM的設(shè)計(jì)是以對(duì)象管理組織(OMG)的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語(yǔ)言。最初人們把它認(rèn)為是一種讓JavaScript在瀏覽器間可移植的方法，不過(guò)DOM的應(yīng)用已經(jīng)遠(yuǎn)遠(yuǎn)超出這個(gè)范圍。Dom技術(shù)使得用戶(hù)頁(yè)面可以動(dòng)態(tài)地變化，如可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等，Dom技術(shù)使得頁(yè)面的交互性大大地增強(qiáng)。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)閩清,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):13518219792

DOM的增加

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

創(chuàng)建節(jié)點(diǎn)

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

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

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

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

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

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

插入節(jié)點(diǎn)###

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

1. node.appendChild()：末尾追加一個(gè)新節(jié)點(diǎn)

2. node.insertBefore()：插入一個(gè)新節(jié)點(diǎn)

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

<script>var para=document.createElement("p");var node=document.createTextNode("這是新段落。");

para.appendChild(node);

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

element.appendChild(para);</script>

例子解釋?zhuān)?/strong>

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

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

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

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

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

para.appendChild(node);

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

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

這段代碼向這個(gè)已有的元素追加新元素：

element.appendChild(para);

關(guān)于document.createAttribute()

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

<div id="div1">

<p id="p1">這是一個(gè)段落</p>

<p id="p2">這是另一個(gè)段落</p>

</div>

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

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

node.setAttributeNode(attr);//運(yùn)用到對(duì)應(yīng)的元素節(jié)點(diǎn)上

關(guān)于node.cloneNode()

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

<div id="div1">

<p id="p1">這是一個(gè)段落</p>

<p id="p2">這是另一個(gè)段落</p>

</div>

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

cloneNode.id ="div2";//修改克隆的節(jié)點(diǎn)id名稱(chēng)為div2；

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

DOM的刪除

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

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

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

<script>var parent=document.getElementById("div1");var child=document.getElementById("p1");

parent.removeChild(child);</script>

例子解釋?zhuān)?/strong>

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

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

找到id="div1"的元素：

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

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

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

從父元素中刪除子元素：

parent.removeChild(child);

DOM的修改

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

1. appendChild()：末尾追加一個(gè)新節(jié)點(diǎn)

2. insertBefore()：插入一個(gè)新節(jié)點(diǎn)

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

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

DOM的查找

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

查找元素

1. getElementById() --- 通過(guò)ID訪問(wèn)；

2. getElementsByClassName() --- 通過(guò)類(lèi)名訪問(wèn)；

3. getElementsByTagName() --- 通過(guò)標(biāo)簽名稱(chēng)訪問(wèn)；

4. querySelector() --- 通過(guò)CSS選擇器訪問(wèn)（單個(gè)）；

5. querySelectorAll() --- 通過(guò)CSS選擇器訪問(wèn) （所有）；

關(guān)于這一節(jié)的內(nèi)容，可以訪問(wèn)上一篇文章：JavaScript-DOM訪問(wèn)方式

節(jié)點(diǎn)查找

所有的節(jié)點(diǎn)都有這些屬性，都是可以用于訪問(wèn)相關(guān)的node節(jié)點(diǎn)：

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

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

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

4. Node.parentNode: 訪問(wèn)當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，父節(jié)點(diǎn)只能有一個(gè)，祖節(jié)點(diǎn)可以用Node.parentNode.parentNode 的形式來(lái)訪問(wèn)。

5. Node.nextSibling: 訪問(wèn)DOM樹(shù)上與當(dāng)前節(jié)點(diǎn)同級(jí)別的下一個(gè)節(jié)點(diǎn)。

6. Node.previousSibling: 訪問(wèn)DOM樹(shù)上與當(dāng)前節(jié)點(diǎn)同級(jí)別的上一個(gè)節(jié)點(diǎn)。

總結(jié)

DOM的操作在JavaScript中的重要性不言而喻，而基于DOM的操作，會(huì)關(guān)系到所有的交互操作。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱(chēng)：DOM在JavaScript的應(yīng)用-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://muchs.cn/article24/pogce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站建設(shè)、App開(kāi)發(fā)、定制開(kāi)發(fā)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)

廣告

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