檢測節點何時被刪除（或由於父節點而從DOM中刪除）

Question

我想檢測節點（例如，nodeX）何時不再可用，因為它已被刪除或者因為它的父節點（或其父節點父節點）已被刪除。

到目前為止，我所能想到的是使用Mutation Observer查看頁面上的任何刪除，並檢查刪除的節點是nodeX還是nodeX用於后代。

有沒有更簡單的方法？

---

請注意：據我所知，鏈接的問題（這個問題“是重復的”）詢問“如何檢測節點的[直接]刪除”。 我問“如何檢測節點或其父節點（或任何其他祖先）的刪除”。

據我所知，對於變異觀察者來說，這並不簡單：你需要檢查每個被刪除的節點，看看它是否是一個祖先。

這是我想要確認或否認的。

據我了解，這與鏈接的問題不同。

Answer 1

這是一個實現，用於標識元素的刪除方式（ 直接刪除或刪除父元素）

 var target = document.querySelector('#to-be-removed'); var observer = new MutationObserver(function(mutations) { // check for removed target mutations.forEach(function(mutation) { var nodes = Array.from(mutation.removedNodes); var directMatch = nodes.indexOf(target) > -1 var parentMatch = nodes.some(parent => parent.contains(target)); if (directMatch) { console.log('node', target, 'was directly removed!'); } else if (parentMatch) { console.log('node', target, 'was removed through a removed parent!'); } }); }); var config = { subtree: true, childList: true }; observer.observe(document.body, config); var qs = document.querySelector.bind(document); qs('#ul').addEventListener('click', function(){qs('ul').remove();}, false) qs('#li').addEventListener('click', function(){qs('#to-be-removed').remove();}, false) 

 <ul> <li>list item 1</li> <li>list item 2</li> <li id="to-be-removed">list item 3</li> <li>list item 4</li> </ul> <button id="ul">remove ul</button> <button id="li">remove li</button> 

Answer 2

如果刪除的子樹在從文檔中刪除后發生變異，則接受的答案將失敗。 例如：

target.parent.remove();
target.remove();

將為突變觀察器生成一次調用以移除父節點（當子樹已從文檔中刪除時，目標節點移除將不會報告給觀察者）。

var parentMatch = nodes.some(parent => parent.contains(target));

在接受的答案中將返回false，因為目標不再是孩子。 問題是突變事件報告是批處理的，並且您不能依賴於節點移除時的狀態保持與調用突變觀察者時相同的狀態。

出於這個原因，面對與提問者類似的問題，我創建了一個目標節點祖先的WeakSet。 使用附加到文檔根目錄的變異觀察器，我將突變與該集合和目標進行了比較。 如果突變節點移除事件包括此集合中的節點或目標節點，我知道目標節點已從樹中刪除。 這並不意味着節點仍然被刪除（它可能已被添加回來）或節點仍然是我的集合中祖先的子節點。 但我可以確定該節點在過去被刪除了。

您必須小心區分突變后的DOM狀態和接收突變事件時的狀態。

Answer 3

在堆棧溢出之前已經問過這個問題。 如何檢測從dom元素添加/刪除的元素？

如果你只想檢查某個特定時間點是否存在某些東西，你顯然可以這樣做：

if (!document.querySelector(".nonexistent")) {
  console.log("doesn't exist");
}

否則，Mutation Observers是您唯一的選擇。