在之前的文章中判耕，學(xué)習(xí)過(guò)了DOM的訪(fǎng)問(wèn)方式而柑，其中也把DOM相關(guān)的概念進(jìn)行了學(xué)習(xí)苟耻，其實(shí)DOM的內(nèi)容還有很多蛤育，所以本文將會(huì)繼續(xù)學(xué)習(xí)DOM操作相關(guān)的內(nèi)容宛官，DOM操作涉及到的操作有：增、刪瓦糕、改底洗、查，而查這方面的內(nèi)容其實(shí)就是上一次所寫(xiě)的“訪(fǎng)問(wèn)方式”咕娄。
DOM的增加
DOM操作中增指的是增加節(jié)點(diǎn)枷恕，分為兩部分：創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)。
創(chuàng)建節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)中常用的API方法主要有：
-
document.createElement()：創(chuàng)建指定的HTML元素 -
document.createTextNode()：創(chuàng)建文本節(jié)點(diǎn) -
document.createDocumentFrame()：創(chuàng)建文檔片段 -
document.createAttribute()：創(chuàng)建節(jié)點(diǎn)屬性 -
node.cloneNode()：克隆節(jié)點(diǎn)
插入節(jié)點(diǎn)###
插入節(jié)點(diǎn)常用的API方法主要有：
-
node.appendChild()：末尾追加一個(gè)新節(jié)點(diǎn) -
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方法主要有：
-
appendChild()：末尾追加一個(gè)新節(jié)點(diǎn) -
insertBefore()：插入一個(gè)新節(jié)點(diǎn) -
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)查找续镇。
查找元素
-
getElementById()--- 通過(guò)ID訪(fǎng)問(wèn)； -
getElementsByClassName()--- 通過(guò)類(lèi)名訪(fǎng)問(wèn)销部； -
getElementsByTagName()--- 通過(guò)標(biāo)簽名稱(chēng)訪(fǎng)問(wèn)摸航； -
querySelector()--- 通過(guò)CSS選擇器訪(fǎng)問(wèn)（單個(gè)）制跟； -
querySelectorAll()--- 通過(guò)CSS選擇器訪(fǎng)問(wèn) （所有）；
關(guān)于這一節(jié)的內(nèi)容酱虎，可以訪(fǎng)問(wèn)上一篇文章：JavaScript-DOM訪(fǎng)問(wèn)方式
節(jié)點(diǎn)查找
所有的節(jié)點(diǎn)都有這些屬性雨膨，都是可以用于訪(fǎng)問(wèn)相關(guān)的node節(jié)點(diǎn)：
-
Node.childNodes: 訪(fǎng)問(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)）聊记。 -
Node.firstChild: 與childNodes數(shù)組的第一個(gè)項(xiàng)(Element.childNodes[0])是同樣的效果，僅僅是快捷方式恢暖。 -
Node.lastChild: 與childNodes數(shù)組的最后一個(gè)項(xiàng)(Element.childNodes[Element.childNodes.length-1])是同樣的效果排监，僅僅是快捷方式。 -
Node.parentNode: 訪(fǎng)問(wèn)當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)杰捂，父節(jié)點(diǎn)只能有一個(gè)舆床，祖節(jié)點(diǎn)可以用Node.parentNode.parentNode的形式來(lái)訪(fǎng)問(wèn)。 -
Node.nextSibling: 訪(fǎng)問(wèn)DOM樹(shù)上與當(dāng)前節(jié)點(diǎn)同級(jí)別的下一個(gè)節(jié)點(diǎn)琼娘。 -
Node.previousSibling: 訪(fǎng)問(wèn)DOM樹(shù)上與當(dāng)前節(jié)點(diǎn)同級(jí)別的上一個(gè)節(jié)點(diǎn)峭弟。
總結(jié)
DOM操作在JavaScript還是很重要的，簡(jiǎn)單點(diǎn)說(shuō)脱拼，所有的交互操作都是基于DOM來(lái)操作的瞒瘸。而DOM中的操作，最為熟悉的就是對(duì)DOM的增熄浓、刪情臭、改、查赌蔑。今天的內(nèi)容也就圍繞著這幾個(gè)方面展開(kāi)學(xué)習(xí)俯在。
