本篇內(nèi)容介紹了“DOM節(jié)點操作方法有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
DOM不僅可以查找節(jié)點，也可以創(chuàng)建節(jié)點、復(fù)制節(jié)點、插入節(jié)點、刪除節(jié)點和替換節(jié)點。
節(jié)點操作方法
方法 說明
write() 把任意字符串插入到文檔中
createElement() 創(chuàng)建一個元素節(jié)點
appendChild() 將新節(jié)點追加到子節(jié)點列表的末尾
createTextNode() 創(chuàng)建一個文件節(jié)點
insertBefore() 將新節(jié)點插入在前面
repalceChild() 將新節(jié)點替換舊節(jié)點
cloneNode() 復(fù)制節(jié)點
removeChild() 移除節(jié)點
1.write()方法
write()方法可以把任意字符串插入到文檔中去。
document.write('
這是一個段落！
')' ; //輸出任意字符串2.createElement()方法
createElement()方法可以創(chuàng)建一個元素節(jié)點。
document.createElement('p'); //創(chuàng)建一個元素節(jié)點
3.appendChild()方法
appendChild()方法講一個新節(jié)點添加到某個節(jié)點的子節(jié)點列表的末尾上。
var box = document.getElementById('box'); //獲取某一個元素節(jié)點
var p = document.createElement('p'); //創(chuàng)建一個新元素節(jié)點
box.appendChild(p); //把新元素節(jié)點
添加子節(jié)點末尾
4.createTextNode()方法
createTextNode()方法創(chuàng)建一個文本節(jié)點。
var text = document.createTextNode('段落'); //創(chuàng)建一個文本節(jié)點
p.appendChild(text); //將文本節(jié)點添加到子節(jié)點末尾
5.insertBefore()方法
insertBefore()方法可以把節(jié)點創(chuàng)建到指定節(jié)點的前面。
box.parentNode.insertBefore(p, box); //把
PS：insertBefore()方法可以給當前元素的前面創(chuàng)建一個節(jié)點，但卻沒有提供給當前元素的后面創(chuàng)建一個節(jié)點。那么，我們可以用已有的知識創(chuàng)建一個insertAfter()函數(shù)。
function insertAfter(newElement, targetElement) {
//得到父節(jié)點
var parent = targetElement.parentNode;
//如果最后一個子節(jié)點是當前元素，那么直接添加即可
if (parent.lastChild === targetElement) {
parent.appendChild(newElement);
} else {
//否則，在當前節(jié)點的下一個節(jié)點之前添加
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
var input = null;
if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {
input = document.createElement("");
} else {
//標準瀏覽器，使用標準方式
input = document.createElement('input');
input.setAttribute('type', 'radio');
input.setAttribute('name', 'sex');
}
document.getElementsByTagName('body')[0].appendChild(input);
6.repalceChild()方法
replaceChild()方法可以把節(jié)點替換成指定的節(jié)點。
box.parentNode.replaceChild(p,box); //把
7.cloneNode()方法
cloneNode()方法可以把子節(jié)點復(fù)制出來。
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); //獲取第一個子節(jié)點，true表示復(fù)制內(nèi)容
box.appendChild(clone); //添加到子節(jié)點列表末尾
8.removeChild()方法
removeChild()方法可以把
box.parentNode.removeChild(box); //刪除指定節(jié)點
“DOM節(jié)點操作方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
重慶分公司
重慶分公司
