javascript - 如何在 contenteditable div 中获取已删除的元素？

Question

我将根 div 设置为 contenteditable，它包含许多 img 和 video 元素。那么当用户编辑它并按退格键删除一个元素时，如何获取用户删除了哪个元素并获取已删除元素的属性值？

Answer 1

如果您对删除的元素及其属性感兴趣，一种方法是设置 MutationObserver跟踪对 DOM 的修改。它的回调提供更改和受影响的元素以及其他有用信息。

(new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        if(mutation.type=='attributes')
            console.log('Element attributes may have changed, see record:',mutation);
        else
        if(mutation.type=='childList')
            console.log('Child nodes were modified, see record:',mutation,
                        'or removedNodes:',mutation.removedNodes);
});})).observe(document.getElementById('edit'),{
    subtree:true,
    attributes:true,
    childList:true,
    characterData:true,
    characterDataOldValue:true
});

fiddle :https://jsfiddle.net/0tdm1wwv/2/

在其他浏览器中也看看它，因为 contenteditable 有一些有趣的风格。