Selection: empty() メソッド

Baseline 広く利用可能

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

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

Selection.empty() メソッドは、選択範囲からすべての範囲を削除し、anchorNode および focusNode プロパティの値を null にし、何も選択されていない状態にします。このメソッドが呼び出されると、文書で selectionchange イベントが発生します。

メモ: このメソッドは、Selection.removeAllRanges() メソッドの別名です。

構文

empty()

引数

なし。

返値

なし (undefined)。

例

この例では、ページ上で何かが選択されたとき、あるいは選択されていないときにメッセージを表示します。これは、文書上で selectionchange イベントを待ち受けることで実現されます。また、Selection.empty() を呼び出して選択範囲をすべてクリアするボタンもあります。これが実行されると、選択状態が変更され、メッセージが更新されます。

html

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet
  urna eget sapien venenatis, eget facilisis diam mattis.
</p>
<button>選択を解除</button>
<pre id="log"></pre>

const log = document.getElementById("log");

// 選択オブジェクトは、文書に紐づけられたシングルトン
const selection = document.getSelection();

// 選択があるかどうかをログ出力
function newSelectionHandler() {
  if (selection.rangeCount !== 0) {
    log.textContent = "テキストが選択されました。";
  } else {
    log.textContent = "この文書では選択範囲がありません。";
  }
}

document.addEventListener("selectionchange", () => {
  newSelectionHandler();
});

newSelectionHandler();

// 「選択範囲を解除」ボタン
const button = document.querySelector("button");
button.addEventListener("click", () => {
  selection.empty();
});