Selection: containsNode() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
Selection.containsNode() メソッドは、指定されたノードが選択範囲に含まれているかどうかを示します。
構文
js
containsNode(node)
containsNode(node)
containsNode(node, partialContainment)
引数
node-
選択範囲内で検索対象となっているノード。
partialContainment省略可-
trueに設定されている場合、ノードの一部が選択範囲に含まれていると、containsNode()はtrueを返します。falseに設定されている場合、ノード全体が選択範囲に含まれている場合にのみ、containsNode()はtrueを返します。指定がない場合は、デフォルト値のfalseが使用されます。
返値
指定されたノードが選択範囲に含まれている場合は true を返し、そうでない場合は false を返します。
例
選択範囲の検査
このスニペットは、body 要素内の要素が何か選択されているかを確認します。
js
console.log(window.getSelection().containsNode(document.body, true));
隠された単語を見つける
この例では、秘密の単語を選択するとメッセージが表示されます。ここでは、addEventListener() を使用して、selectionchange イベントが発生したかどうかを確認しています。
HTML
html
<p>Can you find the secret word?</p>
<p>Hmm, where <span id="secret">SECRET</span> could it be?</p>
<p id="win" hidden>You found it!</p>
CSS
css
#secret {
color: transparent;
}
JavaScript
js
const secret = document.getElementById("secret");
const win = document.getElementById("win");
// 選択の変更を待ち受け
document.addEventListener("selectionchange", () => {
const selection = window.getSelection();
const found = selection.containsNode(secret);
win.toggleAttribute("hidden", !found);
});
結果
仕様書
| 仕様書 |
|---|
| Selection API # dom-selection-containsnode |
ブラウザーの互換性
関連情報
- 所属先のインターフェイスである
Selection