本篇內(nèi)容介紹了“JavaScript的DOM怎么弄”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
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)
這是一個(gè)段落
這是另一個(gè)段落
例子解釋：
這段代碼創(chuàng)建新的
元素：
var para=document.createElement("p");
如需向
元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建了一個(gè)文本節(jié)點(diǎn)：
var node=document.createTextNode("這是新段落。");
然后您必須向
元素追加這個(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() 。
這是一個(gè)段落
這是另一個(gè)段落
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)本身。
這是一個(gè)段落
這是另一個(gè)段落
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ò)。
這是一個(gè)段落。
這是另一個(gè)段落。
例子解釋：
這個(gè) HTML 文檔含有擁有兩個(gè)子節(jié)點(diǎn)（兩個(gè)
元素）的
這是一個(gè)段落。
這是另一個(gè)段落。
找到 id="div1"的元素：
var parent=document.getElementById("div1");
找到id="p1" 的
元素：
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) （所有）；
所有的節(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樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的下一個(gè)節(jié)點(diǎn)。
6. Node.previousSibling: 訪問(wèn)DOM樹上與當(dāng)前節(jié)點(diǎn)同級(jí)別的上一個(gè)節(jié)點(diǎn)。
“JavaScript的DOM怎么弄”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
