Selection：containsNode() 方法
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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>你能找到那个秘密单词吗？</p>
<p>嗯，它会不会在 <span id="secret">SECRET</span> 这里？</p>
<p id="win" hidden>你找到了！</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);
});
结果
规范
| Specification |
|---|
| Selection API # dom-selection-containsnode |
浏览器兼容性
参见
- 所属的
Selection接口。