web-dev-qa-db-ja.com

document.getSelectionによって返されるオブジェクトのanchorNode、baseNode、extentNodeおよびfocusNodeとは何ですか？

HTMLページで選択を行った場合：

var a = document.getSelection()

4つのプロパティを持つオブジェクトを取得します。

  1. anchorNode
  2. baseNode
  3. エクステントノード
  4. focusNode

最初の3つの値は同じです。つまり、選択したテキストですが、どのように異なり、どれを使用しますか？

javascripthtmlgoogle-chromedomdocument
26
Rishul Matta

[〜＃〜] mdn [〜＃〜] によると

Selection。anchorNode-選択が始まるNodeを返します。

Selection。focusNode-選択が終了するNodeを返します。

名前付けについての議論があったため、baseNodeはanchorNodeのエイリアスですextentNodeforfocusNode

以下はこの質問の範囲を超えていますが、一部のシナリオでは選択が難しい部分であることがわかったので、とにかくこれを投稿します。

この例を見てください：

<p>ab12<sup>3</sup>4567890 !</p>

「1234567890」を選択したとします。アンカーとフォーカスのノードとオフセットがどこにあるかを説明するために写真を作りました。

window.getSelection

56
Laimis

ネストされたcontenteditable要素を必要とする機能を構築しています。デバッグしていると、baseNodeとextentNodeが[〜＃〜] [〜＃〜]だけのエイリアスであることがわかりました。それらはMDNにないので、それらのドキュメントを見つけようとしています。しかし、このスクリーンショットに基づいて、それらが単なるエイリアスであるとは思いません（Chromeの場合）： enter image description here

6
tjmehta

私は決して専門家ではありませんが、実験してみると、anchorNodeは選択が開始されたノードであり、focusNodeは選択が終了したノードであるようです（おそらく、選択が終了するとフォーカスがあるためです）。

baseNodeはanchorNodeと同じで、extentNodeはbaseNodeと同じように見えますが、Firefoxには存在せず、Chromeにのみ存在します。

3
ehrencrona