DOM節(jié)點(diǎn)操作方法有哪些-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“DOM節(jié)點(diǎn)操作方法有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年的新華網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整新華建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“新華網(wǎng)站設(shè)計(jì)”,“新華網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

DOM不僅可以查找節(jié)點(diǎn)，也可以創(chuàng)建節(jié)點(diǎn)、復(fù)制節(jié)點(diǎn)、插入節(jié)點(diǎn)、刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)。

節(jié)點(diǎn)操作方法

方法說(shuō)明

write() 把任意字符串插入到文檔中

createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn)

appendChild() 將新節(jié)點(diǎn)追加到子節(jié)點(diǎn)列表的末尾

createTextNode() 創(chuàng)建一個(gè)文件節(jié)點(diǎn)

insertBefore() 將新節(jié)點(diǎn)插入在前面

repalceChild() 將新節(jié)點(diǎn)替換舊節(jié)點(diǎn)

cloneNode() 復(fù)制節(jié)點(diǎn)

removeChild() 移除節(jié)點(diǎn)

1.write()方法

write()方法可以把任意字符串插入到文檔中去。

document.write('<p>這是一個(gè)段落！</p>')' ; //輸出任意字符串

2.createElement()方法

createElement()方法可以創(chuàng)建一個(gè)元素節(jié)點(diǎn)。

document.createElement('p'); //創(chuàng)建一個(gè)元素節(jié)點(diǎn)

3.appendChild()方法

appendChild()方法講一個(gè)新節(jié)點(diǎn)添加到某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾上。

var box = document.getElementById('box'); //獲取某一個(gè)元素節(jié)點(diǎn)

var p = document.createElement('p'); //創(chuàng)建一個(gè)新元素節(jié)點(diǎn)<p>

box.appendChild(p); //把新元素節(jié)點(diǎn)<p>添加子節(jié)點(diǎn)末尾

4.createTextNode()方法

createTextNode()方法創(chuàng)建一個(gè)文本節(jié)點(diǎn)。

var text = document.createTextNode('段落'); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

p.appendChild(text); //將文本節(jié)點(diǎn)添加到子節(jié)點(diǎn)末尾

5.insertBefore()方法

insertBefore()方法可以把節(jié)點(diǎn)創(chuàng)建到指定節(jié)點(diǎn)的前面。

box.parentNode.insertBefore(p, box); //把<div>之前創(chuàng)建一個(gè)節(jié)點(diǎn)

PS：insertBefore()方法可以給當(dāng)前元素的前面創(chuàng)建一個(gè)節(jié)點(diǎn)，但卻沒有提供給當(dāng)前元素的后面創(chuàng)建一個(gè)節(jié)點(diǎn)。那么，我們可以用已有的知識(shí)創(chuàng)建一個(gè)insertAfter()函數(shù)。

function insertAfter(newElement, targetElement) {

//得到父節(jié)點(diǎn)

var parent = targetElement.parentNode;

//如果最后一個(gè)子節(jié)點(diǎn)是當(dāng)前元素，那么直接添加即可

if (parent.lastChild === targetElement) {

parent.appendChild(newElement);

} else {

//否則，在當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)之前添加

parent.insertBefore(newElement, targetElement.nextSibling);

}

var input = null;

if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {

input = document.createElement("<input type=\"radio\" name=\"sex\">");

} else {

//標(biāo)準(zhǔn)瀏覽器，使用標(biāo)準(zhǔn)方式

input = document.createElement('input');

input.setAttribute('type', 'radio');

input.setAttribute('name', 'sex');

}

document.getElementsByTagName('body')[0].appendChild(input);

6.repalceChild()方法

replaceChild()方法可以把節(jié)點(diǎn)替換成指定的節(jié)點(diǎn)。

box.parentNode.replaceChild(p,box); //把<div>換成了<p>

7.cloneNode()方法

cloneNode()方法可以把子節(jié)點(diǎn)復(fù)制出來(lái)。

var box = document.getElementById('box');

var clone = box.firstChild.cloneNode(true); //獲取第一個(gè)子節(jié)點(diǎn)，true表示復(fù)制內(nèi)容

box.appendChild(clone); //添加到子節(jié)點(diǎn)列表末尾

8.removeChild()方法

removeChild()方法可以把

box.parentNode.removeChild(box); //刪除指定節(jié)點(diǎn)

“DOM節(jié)點(diǎn)操作方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)題目：DOM節(jié)點(diǎn)操作方法有哪些-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article44/dspcee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)、商城網(wǎng)站、品牌網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)

猜你還喜歡下面的內(nèi)容