在给定 javascript 选择对象的情况下确定 HTML 节点名称

Question

如何确定与给定 javascript 选择对象关联的节点（与此 innerHTML 关联的标记）？我正在使用 window.getSelection() 并且想知道选择在哪个 div/span 类中。

谢谢！

Answer 1

如果您想要包含整个选择的最深元素，最简单的方法是从选择中获取Range 对象并使用其commonAncestorContainer 属性。

jsFiddle：http://jsfiddle.net/5LvEG/1/

代码：

function getSelectionContainerElementId() {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
        var range = sel.getRangeAt(0);
        var container = range.commonAncestorContainer;

        // container could be a text node, so use its parent if so
        if (container.nodeType == 3) {
            container = container.parentNode;
        }
        return container.id;
    }
    return null;
}

alert(getSelectionContainerElementId());