Range: selectNodeContents() メソッド
Range.selectNodeContents()
メソッドは Range
が Node
のコンテンツを含むように設定します。
Range
の開始と終わりの親ノード (Node
) が参照ノードになります。 startOffset
は 0 で、 endOffset
は子 Node
の数、または参照ノードに格納する文字数です。
構文
js
selectNodeContents(referenceNode)
引数
返値
なし (undefined
)。
例
js
const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);
ライブ例
この例では、ユーザーがボタンで段落を選択・解除できるようにしています。
Document.createRange()
、Range.selectNodeContents()
、Selection.addRange()
を使用してコンテンツを選択しています。
選択解除には Window.getSelection()
と Selection.removeAllRanges()
を使用します。
HTML
html
<p id="p">
<strong>以下のボタンを使用して</strong
>この段落の内容を選択または選択解除してください。
</p>
<button id="select-button">段落を選択</button>
<button id="deselect-button">段落を選択解除</button>
JavaScript
js
const p = document.getElementById("p");
const selectButton = document.getElementById("select-button");
const deselectButton = document.getElementById("deselect-button");
selectButton.addEventListener("click", (e) => {
// Clear any current selection
const selection = window.getSelection();
selection.removeAllRanges();
// Select paragraph
const range = document.createRange();
range.selectNodeContents(p);
selection.addRange(range);
});
deselectButton.addEventListener("click", (e) => {
const selection = window.getSelection();
selection.removeAllRanges();
});
結果
仕様書
Specification |
---|
DOM Standard # dom-range-selectnodecontents |
ブラウザーの互換性
BCD tables only load in the browser