Range.isPointInRange() - ポイントが範囲に含まれるか確認する
isPointInRange()は、Rangeのメソッドです。ポイントが、範囲に含まれているか否かを確認します。
概要
- 名前
- isPointInRange
- 所属
- Range
- IDL
boolean isPointInRange(Node node, unsigned long offset);
- 仕様書
- https://dom.spec.whatwg.org/#dom-range-ispointinrange
説明
第1引数(node)には、ポイントを含むノードを指定します。
第2引数(offset)には、ポイントの位置を意味する、ノードの先頭からのオフセット(文字数)を指定します。
ポイントが範囲に含まれる場合はtrue、違うならfalseを返します。
デモ
Range.isPointInRange()のデモです。選択範囲をRangeで表現したオブジェクトにメソッドを実行します。選択範囲に「お」と「か」の間のポイントが含まれているか否かを確認します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<div>
<p>あいうえおかきくけこ</p>
</div>
<hr>
<div id="result"></div>
<script>
document.onselectionchange = function () {
document.getElementById( "result" ).textContent = "" ;
var selection = getSelection() ;
var range = selection.getRangeAt(0) ;
var element = document.getElementsByTagName( "p" )[0] ;
var textNode = element.childNodes[0] ; // "あいうえおかきくけこ"
var retuenValue = range.isPointInRange( textNode, 5 ) ;
console.log( range ) ;
console.log( retuenValue ) ;
appendText( range + "\n\n" ) ;
appendText( "startContainer: " + range.startContainer + "\n" ) ;
appendText( "startContainer.data: " + range.startContainer.data + "\n" ) ;
appendText( "startOffset: " + range.startOffset + "\n" ) ;
appendText( "endContainer: " + range.endContainer + "\n" ) ;
appendText( "endContainer.data: " + range.endContainer.data + "\n" ) ;
appendText( "endOffset: " + range.endOffset + "\n" ) ;
appendText( "collapsed: " + range.collapsed + "\n" ) ;
appendText( "commonAncestorContainer: " + range.commonAncestorContainer + "\n" ) ;
appendText( "commonAncestorContainer.data: " + range.commonAncestorContainer.data + "\n\n" ) ;
appendText( "isPointInRange( textNode, 5 ): " + retuenValue + "\n\n" ) ;
}
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | 確認中 | ● 15+ | ● | ● |
関連記事
- Range.comparePoint()
- comparePoint()は、Rangeのメソッドです。ポイントと範囲の位置関係を比較します。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
- Range.getBoundingClientRect()
- getBoundingClientRect()は、Rangeのメソッドです。範囲全体を最小限で取り囲む矩形を取得します。
- 先頭、末尾の文字を削除する
- 先頭、末尾の文字を削除します。