ガレコレ [Garage Collection]
2017年7月12日(水)
document.getSelection() #HTML5&CSS3&JavaScript
 Webページにおいて、選択して(反転して)いる部分を、オブジェクトとして取り出すことができる。

--
<script>

$obj = document.getSelection();

</script>
--


 文字を取り出すことを明示して、アラートに表示してみる。

--
alert($obj.toString());
--


 getSelection()では、ノード(節)が4つ設定されている。

--
$obj.anchorNode
$obj.baseNode・・・anchorNodeのエイリアス(別名)

$obj.focusNode
$obj.extentNode・・・focusNodeのエイリアス(別名)
--

 ところが、上記のNodeの内容が、Microsoft EdgeとIEでは、相変わらず無茶苦茶であり、しかもEdgeとIEで異なる。

 Windows10+ChromeとiPhone5c+iOS10.3.2+safariは同じ挙動で、内容も納得できる。とりあえず、こちらで説明を進めていくことにする。

 下記のHTMLにおいて、選択範囲またはカーソルの位置により、$obj.anchorNode.wholeTextと$obj.focusNode.wholeTextの変化を追ってみた。

--
<div>あい<b>うえ</b>おん</div>
--

 結論を先に言えば、anchorNodeは始点を含むノード、focusNodeは終点を含むノードと言うことである。ノードの区切りにカーソルがある場合は、前方のノードが優先されている。

(1)「うえ」選択 
○操作
・「うえ」を太字にしたあと、選択されたまま。
・選択を一旦外し、
 ・ダブルクリックで「うえ」選択
 ・「う」→「え」で「うえ」選択
 ・「う」←「え」で「うえ」選択
○選択範囲:うえ
○anchorNode:うえ
○focusNode:うえ

(2)「|あ」
※|はカーソルの位置。文字は選択しない。
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい

(3)「あ|い」
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい

(4)「い|う」
○選択範囲:(無し)
○anchorNode:あい
○focusNode:あい

(5)「う|え」
○選択範囲:(無し)
○anchorNode:うえ
○focusNode:うえ

(6)「え|お」
○選択範囲:(無し)
○anchorNode:うえ
○focusNode:うえ

(7)「お|ん」
○選択範囲:(無し)
○anchorNode:おん
○focusNode:おん

(8)「ん|」
○選択範囲:(無し)
○anchorNode:おん
○focusNode:おん

(9)「あいうえおん」選択 
○操作
 ・トリプルクリックで選択
 ・「あ」→「ん」で選択
○選択範囲:あいうえおん
○anchorNode:あい
○focusNode:おん

(10)「あいうえおん」選択 
○操作
 ・「あ」←「ん」で選択
○選択範囲:あいうえおん
○anchorNode:おん
○focusNode:あい

(11)「い→う」で「いう」選択
○選択範囲:いう
○anchorNode:あい
○focusNode:うえ

(12)「い←う」で「いう」選択
○選択範囲:いう
○anchorNode:うえ
○focusNode:あい

(13)「え→お」で「えお」選択
○選択範囲:えお
○anchorNode:うえ
○focusNode:おん

(14)「え←お」で「えお」選択
○選択範囲:えお
○anchorNode:おん
○focusNode:うえ


[引用]
javascript - What is anchorNode , baseNode , extentNode and focusNode in the object returned by document.getSelection? - Stack
https://stackoverflow.com/questions/27241281/what-is-anchornode-basenode-extentnode-and-focusnode-in-the-object-returned
 
お問い合わせ


by Network Communication Note