Dom 增加 刪除

2022-09-11 08:51:10 字數 783 閱讀 4430

一、增加

新增乙個元素分為3個步驟:

1.建立乙個空元素物件

var a=document.createelement("a")

2.設定關鍵屬性

3.將新物件掛載到dom樹上指定位置(3種情況)

1)在當前父元素下的結尾,新增乙個新元素:

2)在父元素下的某個子元素之前插入:

父元素.insertbefore(a,child)

3)替換父元素的某個子元素

父元素.replacechild(a,child)

以上操作的缺點:由於每次修改一次dom樹,瀏覽器都會重繪頁面,比較耗資源

改進方法如下:1.如果同時新增父元素和子元素時,應該先在記憶體中將子元素新增到父元素中,然後將父元素一次性新增到dom樹上。

2.如果父元素已經在頁面上了,同時要新增多個平級子元素的時候,先將多個子元素臨時加入文件片段物件中,再一次性將文件片段物件一次性新增到dom樹上。

文件片段物件將子元素新增到dom樹後,將自動釋放。

文件片段是記憶體中臨時儲存多個平級子元素的虛擬父元素

操作方法:

1.先建立乙個文件片段物件:

var frag=document.createdocumentfragment();

2.將子元素新增到frag中

3.將frag整體新增到dom樹上

二、刪除

父元素.removechild(child);

DOM的增加 刪除 修改

city bj 北京 sh 上海 gz 廣州 sz 深圳 let li document.createelement li li.innerhtml 江西 等價於 let text document.createtextnode 南昌 let li document.createelement li...

Dom4j增加,修改,刪除XML檔案

1.增加 文件,標籤,屬性 a.建立文字write.xml 建立文字 document doc documenthelper.createdocument b.建立標籤 建立標籤 element rootelem doc.addelement contactlist 建立根標籤 element co...

原生JS給DOM元素增加修改和刪除class

之前一直使用jq,處理頁面結構變化都很方便,不過在某些不實用jq的專案裡,還是必須得知道如何使用原生js去處理頁面中簡單的一些樣式變化。這裡介紹js針對css方面的一些基本操作。hhh change 增加class 方法1 如果你的頁面裡有很多個 temp 類的話 感覺這種不太適合 classarr...