Range: setStart() メソッド
Range.setStart()
メソッドは、 Range
の開始位置を設定します。
startNode
の Node
の型が Text
, Comment
, CDataSection
のいずれかであるとき、 startOffset
は startNode
の開始位置からの文字数です。その他の Node
型の場合、 startOffset
は startNode
からの子ノード数です。
始点を終点より下(文書の下層側)に設定すると、始点と終点の両方が指定された開始位置に設定され、折りたたまれた範囲となります。
構文
js
setStart(startNode, startOffset)
引数
startNode
startOffset
-
startNode
の始点からのRange
のオフセットを表す 0 以上の整数。
返値
なし (undefined
)。
例
要素の一部を強調表示
この例では、 Range.setStart()
と Range.setEnd()
メソッドを使用して、住所の一部を範囲に追加しています。そして、選択された範囲は Range.surroundContents()
を使用して強調表示します。
住所は、 5 つのテキストノードと、 4 つの <br>
要素の合計 9 つのノードを含んでいます。
HTML
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
js
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()
メソッドを使用して、範囲の内容を定義しています。結果として得られる範囲は、テキストノード内の 1 文字目から 5 文字目を含んでいます。
HTML
html
<p id="content">0123456789</p>
<p id="log"></p>
JavaScript
js
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