2017-07-05 27 views
1

我想檢測當一個節點(節點X,說)不再可用,可能是因爲它已被刪除或因其父(或它的雙親父母)被刪除。檢測當一個節點被刪除(或從DOM中刪除,因爲父母是)

到目前爲止,所有我能想到的是使用突變觀察員在頁面上看到的任何刪除,並檢查刪除的節點是節點X或有節點X的後裔。

有沒有更簡單的方法?


請注意:據我瞭解,該鏈接的問題(這個問題「是重複」)問「我怎麼能檢測[直接]刪除一個節點」。我問「我如何檢測節點或其父(或任何其他祖先)的刪除」。

據我瞭解,這是不是與突變觀察家簡單:你需要檢查每一個節點被刪除,看它是否是一個祖先。

這是我尋求確認或否認。

據我理解,就是從鏈接的問題不同。

+1

*「有沒有更簡單的方法?」......你甚至嘗試過嗎? – charlietfl

+0

是的。我閱讀了文檔並嘗試了似乎是合理的猜測。也許有一些我錯過或誤解了 – josinalvo

+0

(請注意,我並不是說我提出的方式太複雜了,我只是想知道是否有更直接的方法) – josinalvo

回答

3

這裏是(直接地或者因爲父除去

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>

0

這在堆棧溢出之前已經被問到了。 How to detect element being added/removed from dom element?

如果你只是要檢查的東西是否存在在特定時間點,你可以很明顯這樣做:

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

否則突變觀察是你唯一的選擇。

1

如果被去除的子樹是接受的答案將會失敗識別元件是如何除去一個實現從文檔中移除後發生變異。例如:

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

會產生一個調用突變觀察員父節點去除(目標節點去除將不會被報告給觀察者,因爲它發生時,已經從文檔中刪除的子樹)。作爲目標不再是孩子

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

在接受的答案

將返回false。問題是突變事件報告是批處理的,並且在刪除節點時不能依賴狀態保持與調用突變觀察者時的狀態相同。

出於這個原因,面臨着類似的問題,因爲提問者,我創建的目標節點的祖先的WeakSet。使用連接到文檔根目錄的突變觀察者,我比較了這個集合和目標的突變。如果突變節點刪除事件包含此集合或目標節點中的節點,我知道目標節點已從樹中刪除。這並不意味着該節點仍然被刪除(它可能已被添加回去),或者該節點仍然是我的祖先的子集。但我可以肯定,該節點在過去被刪除。

您必須小心區分突變後的DOM狀態和當您收到突變事件時的狀態。