如何将“数据”属性存储在contentEditable容器中的Node中？

Question

我正在制作一个用于评论的mention系统，类似于facebook，但我无法弄清楚如何存储提及的ID。

所以我有这个：

<div contenteditable>
  <span data-id="123">Peter</span> is a good person
</div>

但是，在查看浏览器生成的实际HTML时，它会完全删除data-id属性：

<div contenteditable>
  <span>Peter</span> is a good person
</div>

这里的正确方法是什么？

Answer 1

在正常情况下，data-属性在DOM中可见，要访问它们，您需要在JS中定位该元素的dataset。

EG

let div = document.getElementById('span');

console.log(div.dataset);

<div contenteditable>
  <span id="span" data-id="123">Peter</span> is a good person
</div>