javascript/WYSIWYG parentElement返回div而不是p元素

我正在尝试使用contentEditable=true使用javascript构建所见即所得编辑器。我被绊倒的地方是IE document.selection.createRange（）.parentElement（）返回contenteditable设置为true的元素。为了便于理解，我将给您举一个例子：

<div contenteditable="true">
   <p>lorem ip|sum dolor</p>
</div>

洛雷姆·伊普|苏姆·多洛

在本例中，“|”表示插入符号。而在chrome中，当我使用commonAncestorContainer时，返回的元素在本例中是p，在IE parentElement中返回容器div。据我所知，浏览器忽略了这些元素，因此我无法确定哪个元素是焦点。我不会问“是否有办法”，因为我已经看到了非常好的所见即所得编辑器，因此我的问题是如何在本例中获得“真正的”父元素：）

---

啊，顺便说一句，因为我是一个新用户，我不能创建标签。我相信“parentElement”是这个问题的一个很好的标签。

DOM

Range

的

commonAncestorContainer

和

TextRange

的

parentElement（）

略有不同：

commonAncestorContainer

返回最深的节点（可能是文本节点）包含整个范围的，而

parentElement（）

返回包含整个TextRange的最深元素。在您的示例中，

commonAncestorContainer

将是文本节点“lorem ipsum dolor”，而

parentElement（）

将返回

元素。如果这是您想要的，您可以通过检查

commonAncestorContainer

的节点类型来获得该范围：

var containerElement = range.commonAncestorContainer;
if (containerElement.nodeType == 3) {
    containerElement = containerElement.parentNode;
}