【JavaScriptプログラミング】SelectionオブジェクトとRangeオブジェクト

説明:ユーザは、ページ上でテキストの一部を選択して選択領域を作成することができ、選択領域を修正する必要がある場合、例えば、ノードを追加するか、テキストの一部を追加する場合、シナリオを使用してSelectionオブジェクトおよびRangeオブジェクトを操作する必要がある.
一、何ですか
1、何がセレクションの対象ですか?
各ブラウザウィンドウにはSelectionオブジェクトがあり、ユーザのマウスがページで選択した領域を表しています.次のコードでSelectionオブジェクトを得ることができる.

var selection = window.getSelection();

// IE   
var selection = document.selection;

2、何がRangeオブジェクトですか?
Rangeオブジェクトは、ページ上の連続領域を表します.以下のコードで空のRangeオブジェクトを作成できます.

// IE   
var range = document.selection.createRange();

3、関係
各Selectionオブジェクトには一つ以上のRangeオブジェクトがあり、各Rangeオブジェクトは、ユーザがマウスで選択した範囲内の一連の領域を表している.
firefoxブラウザでは、ユーザは、ctrlキーを押しながらページ上の複数の領域を選択することができるので、一つのSelectionオブジェクトは複数のRangeオブジェクトを有することがある.
chromeまたはsafariブラウザでは、ユーザは毎回一部の領域しか選択できないので、一つのSelectionオブジェクトの中には一つのRangeオブジェクトしかない.
二、セレクションの対象
1、属性
属性
説明
レンゲCount
選択領域に含まれる連続範囲の数を返します.(Chromeブラウザには一つの選挙区しか存在しない)
isCollappsed
選択範囲の開始点と終点が同じ位置にあるかどうかを判定するためのブール値を返します.(つまり、範囲選択か単一焦点かを判断するために用いられます)
アンチョルノード
選択範囲の起点があるノードを返します.
アンチョーOffset
選択された開始点の位置ずれ量を示す数字を返します.アンチョーノードがテキストノードである場合、そのテキストノードの最初の文字から選択された最初の文字までの字数(最初の文字が選択されている場合、オフセット量はゼロ)を返します.アンチョーノードが要素である場合、リターンは、選択された最初のノードの前の同じクラスのノードの総数である.(これらのノードは全部アンチョルノードのサブノードです)
focus Node
選択範囲の終点のノードを返します.
focusOffset
は、選択の終点のfocus Node内の位置ずれ量を表している数字を返します.focus Nodeがテキストノードである場合、選択の末尾に選択されていない第1の単語は、テキストノードの中で第数の単語(0から数え始めます)であり、それに戻ります.focus Nodeが要素である場合、戻りは、選択の終了後の最初のノードの前のクラスのノードの総数である.
2、方法
方法
説明
get RangeAt(rangeIndex)
現在のセレクションオブジェクトからレンゲオブジェクトを取得します.rangeIndexは、レンゲオブジェクトのシーケンス番号を表しており、chromeまたはsafariでは、ユーザは毎回一定の領域しか選択できないので、この値は0しか選択できない.
addRange(range)
選択範囲に範囲を追加します.
removeRange(range)
領域を削除
removeAllRanges()
すべての領域を削除
deleteFroom Dcument()
選択範囲内のドキュメントセグメントを直接削除します.
selectAll Children(node)
ノードのすべてのサブノードを範囲選択領域に含める.
contains Node(aNode,aPartlyContined)
あるnodeが現在の選択エリアの一部かどうかを判断します.aNode:Selectionに含まれているかどうかを判断するためのノード.aPartlyContained:trueの場合、セレクションがノードaNodeの一部または全部を含む場合、containsNode()はtrueに戻る.falseの場合、selectionがノードaNodeを完全に含むとき、contains Nodeはtrueに戻ります.
modify(alter、direction、granularity)
現在の選択範囲を拡張します.alter:タイプを変更します.「move」に入ってカーソル位置を移動します.または「exted」は現在の選択範囲を拡張します.direction:選択の方向を調整する.「forward」または「backward」に入ることができます.選択範囲の内容の言語表記の方向によって調整されます.または「left」または「Right」を使用して明確な調整方向を指定します.granularity:調整された距離粒子度.オプションは「character」、「word」、「sentence」、「paragraph」、「line boundary」、「sentence boundary」、「paragraphh boundary」、「document boundary」があります.
toString()
現在の選択範囲のテキストの内容を返します.
collappsetoStart()
この方法の役割は、現在の選択範囲をキャンセルして、元の選択範囲の最初にカーソルを合わせます.このときカーソルが編集可能な位置にある場合、フォーカスを得ると、その場所にカーソルが点滅します.
collaseToEnd()
同じ上から最後まで
collappse(parent Node,offset)
範囲選択を一つの点に折り畳む.parentNode:カーソルがある対象ノード.offset:焦点ずれ量.
exted(node,offset)
選択範囲の焦点を特定の位置に移動します.node:フォーカスはノード内に移動される.offset:オプションで、node内のオフセット位置にフォーカスが移動されます.指定がない場合は、0をデフォルトとして使用します.
三、Rangeオブジェクト
1、属性
属性
説明
テキスト
選択したテキストを取得します. IE httml Text
選択したhtmlを取得します. IE collappsed
Rangeオブジェクトが表す領域の開始点と終了点が同じ位置にあるかどうかを判断するために使用されます.同じ属性値がtrueである場合.
common AncestorContiner
(node)Rangeオブジェクトによって表される領域がどのノードの中にあるかを返します.
endContiner
(node)Rangeオブジェクトによって表される領域を返すための終点はどのノードの中にあるか.
endOffset
(int)Rangeオブジェクトによって表される領域の終点とその終点を含むノードの起点との距離を返すために使用される.
startContiner
(node)Rangeオブジェクトによって表される領域を返すための起点は、どのノードの中にあるか.
startOffset
(int)Rangeオブジェクトによって表される領域の起点と、その起点ノードを含む起点との間の距離を返すために使用される.
2、方法
方法
説明
selectNode(node)
Rangeオブジェクトの起点をあるノードの起点として指定し、Rangeオブジェクトの終点をそのノードの終点として指定します.Rangeオブジェクトに代表される領域は、ノードを含む.
selectNodeContets(node)
Rangeオブジェクトの起点をあるノードのすべてのコンテンツの起点として指定し、Rangeオブジェクトの終点をそのノードのすべてのコンテンツの終点として指定し、つまりRangeオブジェクトに代表される領域にノードのすべてのコンテンツを含ませるということであるが、このノードタグ自体は含まない.
deleteContets()
Rangeオブジェクトに含まれるコンテンツをページから削除します.
clone Range()
現在のRangeオブジェクトをコピーする方法で、コピーされたRangeオブジェクトを返します.
clone Contensts()
この方法は、追加、修正、削除、またはページ上の要素を検索するために必要なオブジェクトのコンテナ要素としてコピーされたDcumentFragmentオブジェクトを返します.
extraContects()
Rangeオブジェクトに代表されるエリアのHTMLコードを一つのDcumentFragmentにコピーし、ページからこのHTMLコードを削除します.
insertNode(node)
指定されたノードをあるRangeオブジェクトによって代表される領域に挿入し、挿入位置はRangeオブジェクトによって代表される領域の起点位置であり、ノードが既にページ内に存在する場合、ノードはRangeオブジェクトによって代表される領域の起点に移動する.
collappse(toStart)toStartは、Booleanタイプです.1、falseは、Rangeオブジェクトに代表されるエリアの起点を終点に移動することを表します.2、trueは、Rangeオブジェクトが代表するエリアの終点をそのエリアの起点に移動することを表しています.
detach()
ブラウザからRangeオブジェクトをリリースするには、リリース後にRangeオブジェクトにアクセスできなくなります.そうでなければ、スクリプトのエラーが発生します.
set Start(node,num)
あるノードのある位置をRangeオブジェクトに代表される領域の始点位置として指定します.num:整数値であり、nodeノードに依存する2つの意味がある.1、最初のパラメータnodeで表されるノードが内容が一段の文字である場合、このパラメータ値は、いくつかの文字の終わりに位置をRangeオブジェクトの代表領域とする起点位置を指定するために使用される(numは0から開始する).2、第1のパラメータnodeで表されるノードが他のサブノードを含む場合、このパラメータは、第数のサブノードの終了位置をRangeオブジェクトに代表される領域の起点位置として指定するために使用される.
set End(node,num)
あるノードのどこかの位置をRangeオブジェクトに代表される領域の終了位置として指定するために使用されます.numの意味は同じです↑
set StartBefore(node)
あるノードの開始位置をRangeオブジェクトに代表される領域の始点位置として指定します.
set StartAfter(node)
あるノードの終点位置をRangeオブジェクトに代表される領域の始点位置として指定します.
set EndBefore(node)
あるノードの開始位置をRangeオブジェクトに代表される領域の終点位置として指定します.
set EndAfter(node)
あるノードの終点位置をRangeオブジェクトに代表される領域の終点位置として指定します.
四、機能実現
【JavaScriptプログラミング】ページの内容のコピーは禁止されています.