Question

我想在Javascript中获取getSeletion（）元素的强大元素。我有一个像这样的HTML：

<div contenteditable="true">
  <strong>TEST</strong>
</div>

我用这个javascript代码测试了它

function getSelectionParentElement() {
        var parentEl = null, sel;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                parentEl = sel.getRangeAt(0).commonAncestorContainer;
                if (parentEl.nodeType != 1) {
                    parentEl = parentEl.parentNode;
                }
            }
        } else if ( (sel = document.selection) && sel.type != "Control") {
            parentEl = sel.createRange().parentElement();
        }
        return parentEl;
    }

并使用window.getSelection（）。anchorNode.parentElement或selection.getRangeAt（0）.startContainer.parentNode

但它只返回div而不是强元素。

Answer 1

在我的测试中，您的getSelectionParentElement()函数返回＆＃34; strong＆＃34;当选择被限制在强元素时。看到这个小提琴演示：

http://jsfiddle.net/akfg87n6/

如果你只选择TEST中的字母，那么它会返回强元素，而如果你选择div中的字母（我在＆＃34之前添加＆＃34;＆＃34;＆＃34;之后添加＃34可能）然后它返回div元素。

根据https://developer.mozilla.org/en/docs/Web/API/Range的commonAncestorContainer()文档：

，这是预期的

Range.commonAncestorContainer [只读]返回包含startContainer和endContainer节点的最深的Node。

当整个文本选择位于strong元素内时，strong元素是包含开始和结束容器节点的最深节点（顺便说一句，在这种情况下，它们都是强元素）。但是如果选择在强元素之外扩展到div内容中，那么强元素不再包含整个选择，因此commonAncestorContainer()必须返回一个较浅的元素，如果文本选择将是div仍被限制在div内容中。

Answer 2

解决方案很简单。我用Rangy。它具有主要浏览器的功能。你可以使用以下命令获取元素：rangy.getSelection（）。focusNode.parentElement.localName

从javascript中选择获得强大的外部元素

2 个答案: