EASYDOM系列教程 之刪除節點

2021-09-16 18:35:08 字數 1404 閱讀 7603

node 物件提供了 removechild() 方法實現從 html 頁面中刪除指定節點。其語法結構如下:

var oldchild = node.removechild(child);

orelement.removechild(child);

在上述語法結構中,呼叫 removechild() 方法的 node 表示 child 引數的父節點,而 child 引數則表示要刪除的那個節點。

oldchild 則用於儲存要刪除的節點的引用,即 oldchild === child。當然,如果我們需要完成的僅僅只是刪除節點操作的話,並不需要定義變數來儲存被刪除的節點。

值得注意的是:在上述語法結構中,如果 child 引數不是 node 的子節點的話,呼叫該方法時會報錯。

我們可以通過如下**示例,測試 removechild() 方法的具體使用:

// 獲取父節點

var parent = document.getelementbyid('parent');

// 獲取子節點

var child = document.getelementbyid('btn');

// 刪除節點

parent.removechild(child);

值得注意的是:被刪除的節點是否從記憶體中被銷毀,mozilla 社群有這樣一段描述:

被移除的這個子節點仍然存在於記憶體中,只是沒有新增到當前文件的 dom 樹中。

因此,你還可以把這個節點重新新增回文件中。當然,實現要用另外乙個變數比如上述語法中的 oldchild 來儲存這個節點的引用。

如果使用上述語法中的第二種方法,即沒有使用 oldchild 來儲存對這個節點的引用,則認為被移除的節點已經是無用的,在短時間內將會被記憶體管理**。

根據 mozilla 社群對 removechild() 方法的描述,我們可以進行如下**示例的嘗試:

// 獲取父節點

var parent = document.getelementbyid('parent');

// 獲取子節點

var child = document.getelementbyid('btn');

// 刪除節點,並將刪除的節點儲存在 oldchild 變數中

var oldchild = parent.removechild(child);

// 將刪除的節點再新增到父節點的子節點列表中

本教程免費開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要註明作者及**,並且不能用於商業。

本教程採用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

EASYDOM系列教程 之屬性操作

element 物件提供了一些方法實現 html 元素的屬性操作,這種操作要比 node 物件提供的方法操作屬性節點要更便捷。element 物件提供了 getattribute 方法用於獲取指定元素的屬性值,其語法結構如下 var attribute element.getattribute at...

EASYDOM系列教程 之插入節點

node 物件提供了一些用於向 html 頁面插入節點的方法,通過這些方法我們可以實現向 html 頁面新增元素,或者移動 html 頁面中的元素。var parent document.getelementbyid parent var button document.createelement ...

EASYDOM系列教程 之Node介紹

dom 的標準規範中提供了 node 物件,該物件主要提供了用於解析 dom 節點樹結構的屬性和方法。dom 樹結構主要是依靠節點進行解析,稱為 dom 節點樹結構。node 物件是解析 dom 節點樹結構的主要入口。node 物件提供的屬性和方法,可以實現遍歷節點 插入節點和替換節點等操作。而這些...