如何获取包含当前选择的 DOM 元素?

IT技术 javascript html dom selection
2021-01-22 22:48:14

您可以使用鼠标选择网页的一部分。

我知道我可以获取当前选择的文本,但是如何获取包含当前选择开始或结束的 DOM 元素?

2个回答

下面将返回当前选择的开始或结束边界的容器元素,使用布尔值isStart来指定是否要开始或结束边界。它将在大多数主流浏览器中工作。添加功能测试以提高健壮性。

function getSelectionBoundaryElement(isStart) {
    var range, sel, container;
    if (document.selection) {
        range = document.selection.createRange();
        range.collapse(isStart);
        return range.parentElement();
    } else {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
       }

        if (range) {
           container = range[isStart ? "startContainer" : "endContainer"];

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}
我正在查看该代码并进行尝试,非常好。但是如果选择了 2,它就不能返回两个元素。
2021-03-29 22:48:14
如果我想获得整个选择的父级怎么办?那可能吗?
2021-04-02 22:48:14

在 IE 中,使用 document.selection.createRange().parentElement() 而在真实浏览器中使用 window.getSelection().getRangeAt(0).startContainer.parentNode。像这样的东西:

function getSelectedNode()
{
    if (document.selection)
        return document.selection.createRange().parentElement();
    else
    {
        var selection = window.getSelection();
        if (selection.rangeCount > 0)
            return selection.getRangeAt(0).startContainer.parentNode;
    }
}
这将在浏览器之间产生不一致的结果,并且不会回答原始问题。在 IE 中,您将获得包含整个选择的元素,而在其他浏览器中,您将获得包含选择开始的节点的父节点(可以是文本节点或元素)。
2021-03-12 22:48:14
此解决方案不适用于所有情况。如果您尝试选择多个标签,则除了第一个标签之外的所有后续标签都将被忽略。更通用的解决方案在这里:stackoverflow.com/a/5222955/1844247
2021-03-28 22:48:14