JavaScript中dom如何添加、刪除節(jié)點(diǎn)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中dom如何添加、刪除節(jié)點(diǎn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

JavaScript中dom有節(jié)點(diǎn)構(gòu)成，節(jié)點(diǎn)的操作推動著dom功能的發(fā)揮。想要對dom添加或刪除節(jié)點(diǎn)，首先要先創(chuàng)建節(jié)點(diǎn)，使用appendChild()方法添加節(jié)點(diǎn)，使用removeChid()方法刪除節(jié)點(diǎn)。

1、創(chuàng)建節(jié)點(diǎn)

createDocumentFragment() // 創(chuàng)建一個(gè)DOM片段
createElement() // 創(chuàng)建一個(gè)具體的元素
createTextNode() // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2、添加節(jié)點(diǎn)：appendChild()方法

該方法添加的元素位于父元素的末尾。

var ele = document.getElementById("my_div");
var oldEle = document.createElement("p");
var newEle=document.createElement("div");
ele.appendChild(oldEle);

3、刪除節(jié)點(diǎn)：removeChid()方法

用父節(jié)點(diǎn)刪除子節(jié)點(diǎn)。必須要指定是刪除哪個(gè)子節(jié)點(diǎn)。

const ulNode = document.querySelectorAll('.list')[0],
	  liNodes = document.querySelectorAll('.item');
ulNode.removeChild(liNodes[1]);

關(guān)于“JavaScript中dom如何添加、刪除節(jié)點(diǎn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。