web-dev-qa-db-ja.com

現在の選択を含むDOM要素を取得するにはどうすればよいですか？

マウスでウェブページの一部を選択できます。

現在選択されているテキスト を取得できることはわかっていますが、現在の選択の開始または終了を含むDOM要素を取得するにはどうすればよいですか？

javascripthtmldomselection
34
Aaron Digulla

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;
    }
}
35
InvisibleBacon

次の例では、現在の選択範囲の開始境界または終了境界のコンテナーelementを返します。ブール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;
        }   
    }
}
57
Tim Down