Selection.setBaseAndExtent() - 始点と終点をセットする
setBaseAndExtent()は、Selectionのメソッドです。始点と終点を指定して、選択範囲をセットします。
概要
- 名前
- setBaseAndExtent
- 所属
- Selection
- IDL
void setBaseAndExtent(Node anchorNode, unsigned long anchorOffset, Node focusNode, unsigned long focusOffset);
- 仕様書
- http://w3c.github.io/selection-api/#dom-selection-setbaseandextent
説明
第1引数(anchorNode)には、終点を含むノード(anchorNode)を指定します。
第2引数(anchorOffset)には、ノードの先頭からのオフセット(anchorOffset)を数値で指定します。
第3引数(focusNode)には、終点を含むノード(focusNode)を指定します。
第4引数(focusOffset)には、ノードの先頭からのオフセット(focusOffset)を数値で指定します。
デモ
Selection.setBaseAndExtent()のデモです。メソッドを実行すると、始点を「B」、終点を「I」にセットします。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><button id="extend">拡張する [extend()]</button></p>
<p><button id="setBaseAndExtent">始点と終点をセットする [setBaseAndExtent()]</button></p>
<p><button id="selectAllChildren">全ての子ノードを選択する [selectAllChildren()]</button></p>
<hr>
<div id="hoge">
<p>1234567890</p>
<p>あいうえおかきくけこ</p>
<p>abcdefghij</p>
<p id="fuga">ABCDEFGHIJ</p>
</div>
<hr>
<div id="result"></div>
<script>
var selection = getSelection() ;
document.onselectionchange = getSelectionInfo ;
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var textNode = element2.childNodes[0] ; // "ABCDEFGHIJ"
document.getElementById( "extend" ).onclick = function () {
selection.extend( textNode, 5 ) ;
getSelectionInfo() ;
}
document.getElementById( "setBaseAndExtent" ).onclick = function () {
selection.setBaseAndExtent( textNode, 1, textNode, 9 ) ;
getSelectionInfo() ;
}
document.getElementById( "selectAllChildren" ).onclick = function () {
selection.selectAllChildren( element1 ) ;
getSelectionInfo() ;
}
function getSelectionInfo() {
document.getElementById( "result" ).textContent = "" ;
console.log( selection ) ;
appendText( selection + "\n\n" ) ;
appendText( "anchorNode: " + selection.anchorNode + " " + selection.anchorNode.data + "\n" ) ;
appendText( "anchorOffset: " + selection.anchorOffset + "\n" ) ;
appendText( "focusNode: " + selection.focusNode + " " + selection.focusNode.data + "\n" ) ;
appendText( "focusOffset: " + selection.focusOffset + "\n" ) ;
appendText( "isCollapsed: " + selection.isCollapsed + "\n" ) ;
appendText( "rangeCount: " + selection.rangeCount + "\n" ) ;
appendText( "type: " + selection.type + "\n" ) ;
}
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 53+ | ● | ● | 確認中 | ● 15+ | ● | ● |
関連記事
- Range()
- Range()は、Rangeのコンストラクタです。新しいオブジェクトを作成します。
- UIEvent()
- UIEvent()は、UIEventのコンストラクタです。新しいオブジェクトを作成します。
- DragEvent()
- DragEvent()は、DragEventのコンストラクタです。新しいオブジェクトを作成します。
- SecurityPolicyViolationEvent.documentURI
- documentURIは、SecurityPolicyViolationEventのプロパティです。セキュリティポリシーに違反したドキュメントのURIを返します。