在插入符号位置获取元素节点（在 contentEditable 中）答案

【问题标题】：Get element node at caret position (in contentEditable)在插入符号位置获取元素节点（在 contentEditable 中）
【发布时间】：2010-11-14 21:45:53
【问题描述】：

假设我有一些这样的 HTML 代码：

<body contentEditable="true">
   <h1>Some heading text here</h1>
   <p>Some text here</p>
</body>

现在插入符号（闪烁的光标）在 <h1> 元素内闪烁，假设在单词 "|heading" 中。

如何使用 JavaScript 获取插入符号所在的元素？这里我想获取节点名称："h1".

这只需要在 WebKit 中工作（它嵌入在应用程序中）。它最好也适用于选择。

【问题讨论】：

【解决方案1】：

首先，想想为什么你这样做。如果您试图阻止用户编辑某些元素，只需将这些元素的 contenteditable 设置为 false。

但是，您可以按照您的要求去做。下面的代码在 Safari 4 中工作，并将返回选择所锚定的节点（即用户开始选择的位置，选择“向后”将返回结束而不是开始） - 如果你想要元素类型为字符串，只需获取返回节点的nodeName 属性即可。这也适用于零长度选择（即只是一个插入符号位置）。

function getSelectionStart() {
   var node = document.getSelection().anchorNode;
   return (node.nodeType == 3 ? node.parentNode : node);
}

【讨论】：

我并没有试图以任何方式阻止用户，我真的只需要节点的名称，这样我就可以更新 UI 的一部分。感谢您提供答案，这很好用。
node.nodeType == 3 会更好地检查文本节点。
在 JavaFX HTMLEditor 中使用它可以很好地返回光标/文本插入符号放置在 contentEditable 部分中的元素，谢谢！附带说明一下，document.activeElement 被识别，但总是返回不是很有帮助的 body 元素。
您应该使用window.getSelection 而不是document，这在大多数情况下会更好
window.getSelection().baseNode 也可以。 Related thread