javascriptで選択範囲のDOMを取得する方法

選択した英文を日本語に翻訳してくれるChrome用拡張機能を作っている際に、「翻訳した結果の文章をツールチップとして選択範囲の近くに表示したい」と思い、選択範囲のDOMを取得する方法を調べました。

コード

下記のコードを実行すれば選択したDOMを取得できます。

window.getSelection().anchorNode.parentElement;

このコードを試しにWikipediaのサイトで実行してみます。

しっかり選択したDOMを取得できてます。

解説

まず、window.getSlection()でSelectionオブジェクトを取得します。

window.getSelection();

いろいろなプロパティを取得できましたが、selection - Web API | MDNによると、

anchorNode
selection の始点のある node を返します。
focusNode
selection の終点のある node を返します。

この2つのプロパティが使えそうです。

anchorNodeの中を見てみると、

また沢山のプロパティが出てきましたが、parentElementに欲しいDOMが入っていました。
あとは最初のコードのように今まで出てきたプロパティ名を繋げれば目的達成となります。