Range: selectNodeContents() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

Range.selectNodeContents() メソッドは Range が Node のコンテンツを含むように設定します。

Range の開始と終わりの親ノード (Node) が参照ノードになります。 startOffset は 0 で、 endOffset は子 Node の数、または参照ノードに格納する文字数です。

構文

selectNodeContents(referenceNode)

引数

referenceNode: Range 内でコンテンツが選択されるノード (Node) です。

例

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

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();
});