原生JavaScript是否有操作HTML元素撤销栈的API？contenteditable更新疑问

1. 更新内容同时保留撤销栈的方法 #

直接替换innerHTML会让浏览器把整个操作判定为一次性DOM替换，不会将其纳入撤销历史，进而重置撤销栈。要保留撤销栈，得用浏览器认可的编辑类操作来更新内容，而非直接修改DOM：

• 用Range和Selection API模拟编辑流程：

  1. 选中要替换的目标内容（若需替换全部内容，就选中整个contenteditable元素的所有子节点）；
  2. 删除选中内容；
  3. 插入新的DOM节点；
  4. 可选：恢复或调整光标位置。

  示例代码：

  const editableEl = document.querySelector('[contenteditable="true"]');
  // 准备要插入的新内容
  const newContentTemplate = document.createElement('div');
  newContentTemplate.innerHTML = '<p>替换后的新内容</p>';
  const newContentRange = document.createRange();
  newContentRange.selectNodeContents(newContentTemplate);
  
  // 保存当前选区，若没有选区则选中整个编辑区
  const selection = window.getSelection();
  const currentRange = selection.rangeCount > 0 
    ? selection.getRangeAt(0) 
    : document.createRange();
  currentRange.selectNodeContents(editableEl);
  
  // 执行删除+插入，这两步会被浏览器记录为可撤销操作
  currentRange.deleteContents();
  currentRange.insertNode(newContentRange.cloneContents());
  
  // 将光标移到内容末尾
  selection.removeAllRanges();
  const endRange = document.createRange();
  endRange.selectNodeContents(editableEl);
  endRange.collapse(false);
  selection.addRange(endRange);
  

  这种方式相当于模拟用户手动删除再输入的操作，浏览器会自动将整个过程加入撤销栈，后续用户按Ctrl+Z即可撤销这次更新。

• 兼容旧环境的备选方案（不推荐）：
  虽然document.execCommand('insertHTML')已被标记为弃用，但目前主流浏览器仍支持它。如果你的场景需要兼容旧环境，可以用它插入内容，同样会被纳入撤销栈：

  document.execCommand('insertHTML', false, '<p>新内容</p>');
  

2. 能否通过JavaScript操作撤销栈？ #

不行。浏览器的撤销/重做栈是内部私有状态，没有公开的标准API允许JavaScript直接读取、修改或控制它。我们只能通过模拟用户的自然编辑操作（比如上述Range/Selection方法），让浏览器自动将操作加入撤销栈，但无法直接操作栈本身（比如清空栈、查看栈内内容、手动添加撤销项等）。

内容的提问来源于stack exchange，提问作者Tom Klino