Range.setStart()

Range.setStart() メソッドはRangeの開始位置を設定します。

startNode の Node の型が Text, Comment, CDataSection のいずれかであるとき、 startOffset は startNode の開始位置からの文字数です。その他の Node 型の場合、 startOffset は startNode からの子ノード数です。

始点を終点より下（文書の下層側）に設定すると、始点と終点の両方が指定された開始位置に設定され、折りたたまれた範囲となります。

構文

setStart(startNode, startOffset)

引数

startNode

Range を開始する Node。

startOffset

startNode の始点からの Range のオフセットを表す 0 以上の整数。

返値

なし (undefined)。

例

要素の一部を強調表示

この例では、 Range.setStart() と Range.setEnd() (en-US) メソッドを使用して、住所の一部を範囲に追加しています。そして、選択された範囲は Range.surroundContents() (en-US) を使用して強調表示します。

住所は、 5 つのテキストノードと、 4 つの <br> 要素の合計 9 つのノードを含んでいます。

HTML

<p id="address">Wyatt Earp<br>
101 E. Main St.<br>
Dodge City, KS<br>
67801<br>
USA</p>

<hr>
<p>Nodes in the original address:</p>
<ol id="log"></ol>

JavaScript

const address = document.getElementById('address');
const log = document.getElementById('log');

// Log info
address.childNodes.forEach(node => {
  const li = document.createElement('li');
  li.textContent = `${node.nodeName}, ${node.nodeValue}`;
  log.appendChild(li);
});

// Highlight the street and city
const startOffset = 2;  // Start at third node: 101 E. Main St.
const endOffset = 5;    // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);

const mark = document.createElement('mark');
range.surroundContents(mark);

結果

テキストノードから文字を取得する

この例では、Range.setStart() と Range.setEnd() (en-US) メソッドを使用して、範囲の内容を定義しています。結果として得られる範囲は、テキストノード内の 1 文字目から 5 文字目を含んでいます。

HTML

<p id="content">0123456789</p>
<p id="log"></p>

JavaScript

const element = document.getElementById('content');
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0);  // Start at first character
range.setEnd(textNode, 5);    // End at fifth character
document.getElementById('log').textContent = range;

結果

仕様書

Specification
DOM Standard
# dom-range-setstart

ブラウザーの互換性

BCD tables only load in the browser

関連情報