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

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

最佳答案

如果您对deleted元素及其属性感兴趣，一种方法是设置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
});

小提琴：https://jsfiddle.net/0tdm1wwv/2/
在其他浏览器中也可以看到它，因为contenteditable有一些有趣的风格。