Javascript 如何在contenteditable div中获取已删除的元素？
我将根div设置为Javascript 如何在contenteditable div中获取已删除的元素？,javascript,html,html-select,Javascript,Html,Html Select,我将根div设置为contenteditable，它包含许多img和video元素。因此，当用户编辑它并按backspace删除一个元素时，如何获取用户删除的元素并获取已删除元素的属性值 为事件输入注册eventlistener。如果你需要IE支持，你可以考虑使用按键> 事件。 事件可能会在实际更改发生之前触发，keypress可能不会注册粘贴和剪切更改，因此您也需要处理这些事件（input也会触发这些事件） 然后计算编辑前后的差异，进行分析。如果您对删除的元素及其属性感兴趣，一种方法是设置跟
contenteditableimgvideo输入注册eventlistenerkeypressinput然后计算编辑前后的差异，进行分析。如果您对删除的元素及其属性感兴趣，一种方法是设置跟踪对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
});
contenteditable
var myContent={
currentList:[]，//自上次以来的列表。
initialList:[]，//起始列表，只要我们在某个时候需要它。
//在currentList和initialList中存储所有当前嵌套元素
Init:function（）{
var tRoot=document.getElementById（'Contenteditable'）；
var tL=document.queryselectoral（'a，img'）；//或全部'*'。
对于（var i=0，j=tL.length；iShare您已经尝试过了，或者发布了您的代码我只是在想如果我在当前光标之前获取元素会怎么样，但是如何？：）有趣的方法Dakab，我尝试在Chrome上用Jsfiddle url测试这个，但它对我不起作用。@user4878054:AMutationObserver
提供了有关DOM更改的信息(“突变”）。您将看到哪些元素被删除，它们的属性是什么，但光标位置本身就是一个主题。
<html>
<head>
<script>
var myContent = {
currentList: [], //List since last time.
initialList: [], //Starting list, just if we need it at some point.
//Storing all current nested elements in currentList and initialList
Init: function(){
var tRoot = document.getElementById('Contenteditable');
var tL = document.querySelectorAll('a, img'); //Or just all '*'.
for(var i=0, j=tL.length; i<j; i++){
this.currentList.push(tL[i]);
this.initialList.push(tL[i]);
}
if (!tRoot.oninput) tRoot.oninput = function(){myContent.onInput(this)} //Depending on your requirements use others.
if (!tRoot.onkeyup) tRoot.onkeyup = function(){myContent.onInput(this)} //Depending on your requirements use others.
},
//Comparing current nested elements with currentList and set new currentList
checkChangedElements: function(e){
if (e){
var tE = []; //Storing the exceptions.
var tN = []; //Our new current list.
var tC = []; //Current elements:
var tL = document.querySelectorAll('a, img'); //Or just all '*'.
for(var i=0, j=tL.length; i<j; i++) tC.push(tL[i]);
for(var i=0, j=myContent.currentList.length; i<j; i++){
//if (tC.some(function(item){return item === myContent.currentList[i]}) tE.push(tL[i])
if (tC.indexOf(myContent.currentList[i]) === -1) tE.push(myContent.currentList[i])
else tN.push(myContent.currentList[i])
}
myContent.currentList = tN;
return tE;
}
},
//Our input function firing each two seconds
onInput: function(e){
if (e){
if (e.inputTimer) clearTimeout(e.inputTimer); //We fire it after two seconds without any input
e.inputTimer = setTimeout(function(e){
var tL = myContent.checkChangedElements(e);
e.inputTimer = null;
console.log('Deleted elements: ', tL)
}.bind(undefined, e), 2000)
}
}
}
</script>
</head>
<body onload = 'myContent.Init()'>
<div contenteditable = 'true' id = 'Contenteditable'>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
<a href = 'https://www.google.com/'>Google</a>
<img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
</div>
</body>
</html>