JavaScriptでcollapsed rangeオブジェクトを可視化するツールを作った

JavaScript で、クリックやマウスオーバーのイベントで、カーソル直下の文字列を取得するコードを書いていました。DOM における collapsed range のオブジェクトを操作するのですけど、概念を掴むのがなかなか難しかった。collapsed range オブジェクトとは、range オブジェクトのうち range の始点と終点が同じ位置であり、range.collapsed プロパティが true を返す range オブジェクトのことです。

スポンサーリンク

八章第一回 Rangeとは – JavaScript初級者から中級者になろう – uhyohyo.net
range – Web API インターフェイス | MDN
クリック直下の単語を取得 – JavaScriptで遊ぶよ – g:javascript

WebKit なブラウザでは document.caretRangeFromPoint で collapsed range オブジェクトを取得できる。Mozilla(Firefox)では、同様な collapsed range オブジェクトを、イベントのプロパティ(e.rangeParent, e.rangeOffset)から取得できます。

当初どうにもこの range オブジェクト(今回扱うのは collapsed range オブジェクト)のイメージが掴みにくかったので、以下に range オブジェクトのプロパティを視覚化するツールを作成しました。適当な箇所をクリックすると、range オブジェクトのプロパティ名(関数オブジェクト以外)とその値を表示します。クリックイベントで collapsed range オブジェクトを取得しているので、startOffset と endOffset の値は常に同一で、collapsed プロパティの値は常に true となります。

— 動作確認 —
Firefox 34.0
Google Chrome 39.0

Firefox と Google Chrome でしか動作確認をしていません。他のブラウザでは動かないかもしれないので、ご了承ください。

collapsed range オブジェクトの可視化ツール

以下適当にクリック!range オブジェクトを dump します。

header – ‘here is a header area.’
main – ‘here is a main area.’
sub – ‘here is a sub area.’

cell 1 cell 2 cell 3
cell 4 cell 5 cell 6
cell 7 cell 8 cell 9

HTML コード

以降は、上記ツールのソースコードです。HTML部分。

JavaScript コード

このツールで確認したら、startOffset, endOffset は各々 range オブジェクト内での相対的な位置を表すのだな〜とか、オフセットの位置はコンテナ(startContainer)内の最初の位置から数えるのだな〜などをよく理解できました。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!