DOM節點建立和修改有哪些常用API

2021-10-06 06:23:19 字數 3167 閱讀 4345

答案:

建立節點

修改節點

insertbeforeparentnode.insertbefore(newnode,refnode);

removechildparent.removechild(node)

replacechild

詳細解析:

一、建立節點

createelement

createelement通過傳入指定的乙個標籤名來建立乙個元素,如果傳入的標籤名是乙個未知的,則會建立乙個自定義的標籤。

var div = document.createelement("div");
createtextnode

createtextnode用來建立乙個文字節點。

var textnode = document.createtextnode("乙個textnode");
createdocumentfragment(臨時節點)

createdocumentfragment方法用來建立乙個documentfragment,表示一種輕量級的文件,它的作用主要是儲存臨時的節點用來準備新增到文件中。createdocumentfragment方法主要是用於新增大量節點到文件中時會使用到。

假設要迴圈一組資料,然後建立多個節點新增到文件中,**如下:

1 

2 3

4 document.getelementbyid("btnadd").onclick = function()

11 }

這段**將按鈕繫結了乙個事件,這個事件建立了100個li節點,然後依次將其新增html文件中。這樣做有乙個缺點:每次一建立乙個新的元素,然後新增到文件樹中,這個過程會造成瀏覽器的回流。所謂回流簡單說,就是指元素大小和位置會被重新計算,如果新增的元素太多,會造成效能問題。這個時候,就是使用createdocumentfragment了。

documentfragment不是文件樹的一部分,它是儲存在記憶體中的,所以不會造成回流問題。我們修改上面的**如下:

1 document.getelementbyid("btnadd").onclick = function()

10 12 }

優化後的**主要是建立了乙個fragment,每次生成的li節點先新增到fragment,最後一次性新增到list。

建立型api總結

二、修改節點

child節點將會作為parent節點的最後乙個子節點。

注意:如果被新增的節點是乙個頁面中存在的節點,則執行後這個節點將會新增到指定位置,其原本所在的位置將移除該節點,也就是說不會同時存在兩個該節點在頁面上,相當於把這個節點移動到另乙個地方。

1 2     要被新增的節點

3 4

5 6

7 8 要移動的位置

9

10

11 document.getelementbyid("btnmove").onclick = function()
這段**主要是獲取頁面上的child節點,然後新增到指定位置,可以看到原本的child節點被移動到parent中了。

注意:如果child繫結了事件,被移動時,它依然繫結著該事件。

insertbefore

insertbefore用來新增乙個節點到乙個參照節點之前,用法如下:

parentnode.insertbefore(newnode,refnode);
1 2     父節點

3 4 子元素

5

6 7

8 var parent = document.getelementbyid("parent");

9 var child = document.getelementbyid("child");

10 document.getelementbyid("insertnode").onclick = function()

關於第二個引數參照節點還有幾個注意的地方:

(1)refnode是必傳的,如果不傳該引數會報錯

(2)如果refnode是undefined 或 null,則insertbefore會將節點新增到子元素的末尾

removechild

removechild顧名思義,就是刪除指定的子節點並返回,用法如下:

var deletedchild = parent.removechild(node);
deletedchild指向被刪除節點的引用,它等於node,被刪除的節點仍然存在於記憶體中,可以對其進行下一步操作。

注意:如果被刪除的節點不是其子節點,則程式將會報錯。我們可以通過下面的方式來確保可以刪除:

1 if(node.parentnode)
通過節點自己獲取節點的父節點,然後將自身刪除。

replacechild

replacechild用於使用乙個節點替換另乙個節點,用法如下。

parent.replacechild(newchild,oldchild);
newchild是替換的節點,可以是新的節點,也可以是頁面上的節點,如果是頁面上的節點,則其將被轉移到新的位置

oldchild是被替換的節點。

頁面修改型api總結

頁面修改型api主要是這四個介面,要注意幾個特點:

(1)不管是新增還是替換節點,如果新增或替換的節點是原本存在頁面上的,則其原來位置的節點將被移除,也就是說同乙個節點不能存在於頁面的多個位置

(2)節點本身繫結的事件不會消失,會一直保留著。

建立和插入DOM節點

插入節點 我們獲得了某個dom節點,假設這個dom節點是空的,我們通過innerhtml就可以增加乙個元素了,但是這個dom節點已經存在元素了,我們就不能這麼幹了 會產生覆蓋 追加j ascript j ase j aee j ame 效果 建立乙個新的標籤,實現插入 insertbefore le...

DOM 建立和刪除HTML元素

例如,如果想要在div中新建乙個段落p那麼需要分成以下幾步完成 1,建立新的元素。createelement 節點名 var para document.createelement p 2,建立p元素中的文字,文字為乙個文字節點。createtextnode 文字 var text node doc...

SQL 建立和修改表

這一節記錄如何建立和修改表。怎麼增加刪除列,修改屬性,設定主鍵,外來鍵等 create table 表名 列 資料型別 約束或預設值,列 資料型別 約束或預設值,例如我們要建立乙個學生表,那麼我們要先建立乙個資料庫 create database student manager gouse stud...