您好,登錄后才能下訂單哦!
DOM,即文檔對(duì)象模型,是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。它是一種與平臺(tái)和語(yǔ)言無(wú)關(guān)的應(yīng)用程序接口(API),它可以動(dòng)態(tài)地訪問(wèn)程序和腳本,更新其內(nèi)容、結(jié)構(gòu)和www文檔的風(fēng)格,DOM的重要性不言而喻,今天我們就來(lái)學(xué)習(xí)一下JavaScript中DOM的操作方法。
DOM操作中增指的是增加節(jié)點(diǎn),分為兩部分:創(chuàng)建節(jié)點(diǎn)和插入節(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)常用的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>
例子解釋:
這段代碼創(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);
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)上
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名稱為div2;
document.body.appendChild(cloneNode); //在網(wǎng)頁(yè)中追加克隆的節(jié)點(diǎn);
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>
例子解釋:
這個(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);
修改節(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節(jié)點(diǎn)中的查主要包括:查找元素和節(jié)點(diǎn)查找。
1.?getElementById()?--- 通過(guò)ID訪問(wèn);
2.?getElementsByClassName()?--- 通過(guò)類名訪問(wèn);
3.?getElementsByTagName()?--- 通過(guò)標(biāo)簽名稱訪問(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)都有這些屬性,都是可以用于訪問(wèn)相關(guān)的node節(jié)點(diǎn):
1.?Node.childNodes: 訪問(wèn)一個(gè)單元素下所有的直接子節(jié)點(diǎn)元素,可以是一個(gè)可循環(huán)的類數(shù)組對(duì)象。該節(jié)點(diǎn)集合可以保護(hù)不同的類型的子節(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)。
?
DOM操作在JavaScript還是很重要的,簡(jiǎn)單點(diǎn)說(shuō),所有的交互操作都是基于DOM來(lái)操作的。而DOM中的操作,最為熟悉的就是對(duì)DOM的增、刪、改、查。今天的內(nèi)容也就圍繞著這幾個(gè)方面展開(kāi)學(xué)習(xí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。