JavaScript Selection.containsNode 怎样判断节点是否处于选区内

判断一个 DOM 节点是否处于当前文本选区内，直接取得 window.getSelection()，再调用 selection.containsNode(target) 即可。默认参数要求目标节点被完整选中；如果把第二个参数设为 true，目标节点只要和选区发生部分相交，也会返回 true。

资料入口：https://developer.mozilla.org/en-US/docs/Web/API/Selection/containsNode

先把 Selection、Node 和 Range 区分开

Selection 表示用户当前在文档中选中的范围，Node 是要被检查的 DOM 节点。containsNode() 是 Selection 的实例方法，返回值只有布尔值：目标节点符合当前选区关系时为 true，否则为 false。

实际项目中常见的目标是一个 span、段落或列表项，而用户拖动鼠标时选区边界往往落在文本节点内部。因此“节点是否在选区里”不能只比较元素的 class 或坐标，应该让 Selection 按 DOM 关系判断：

const selection = window.getSelection();
const target = document.querySelector("#secret");

// 没有目标节点或当前没有选区时，先给出明确的未命中结果。
const isContained = Boolean(selection && target && selection.containsNode(target));
console.log(isContained);

这里没有自己拆解 anchorNode、focusNode，也没有把文本转成坐标。判断逻辑更短，且直接对应 Selection API 的语义。

默认参数：判断目标节点是否被完整选中

selection.containsNode(target) 的第二个参数省略时按 false 处理。此时只有目标节点整体处于选区范围内，返回值才是 true。如果用户只拖过目标元素中的一部分文字，默认判断通常会得到 false。

例如，一个消息卡片只有在整段内容都被选中时才显示“复制整卡”提示，可以这样写：

function isWholeNodeSelected(node) {
  const selection = window.getSelection();

  // 空 Selection 仍然可能是一个对象，所以同时检查 rangeCount。
  if (!selection || selection.rangeCount === 0) {
    return false;
  }

  // 省略第二个参数，明确要求目标节点完整包含在选区中。
  return selection.containsNode(node, false);
}

const card = document.querySelector(".message-card");
const showCopyAction = card ? isWholeNodeSelected(card) : false;

基线指标可以记录两项：一次 selectionchange 处理耗时，以及完整选中和只选中部分文字时的命中率。这样能先确认产品真正需要“整节点”还是“碰到节点”再决定参数，而不是凭感觉改布尔值。

partialContainment=true：把部分相交也算作命中

如果你的问题是“用户的选区有没有碰到这个节点”，应该传入 true。此时目标节点只有一部分位于选区内也会返回 true。这适合选中提示词、秘密单词、段落中的关键字等交互。

function markSecretWhenSelected() {
  const selection = window.getSelection();
  const secret = document.querySelector("#secret");
  const message = document.querySelector("#result");

  // selectionchange 触发时重新获取对象，避免沿用旧的节点关系。
  const hit = Boolean(
    selection &&
    selection.rangeCount > 0 &&
    secret &&
    selection.containsNode(secret, true)
  );

  // 用 hidden 表达状态，避免把用户当前选区改写掉。
  if (message) {
    message.toggleAttribute("hidden", !hit);
  }
}

// 浏览器会在文档选区变化时通知监听器。
document.addEventListener("selectionchange", markSecretWhenSelected);

这里的关键不是“监听之后一直保存一个 true”，而是每次事件到来都重新读取当前 Selection。用户取消选区、改选其他文字或节点被移除时，结果都可能变化。

事件处理中的三个边界

把判断接到 selectionchange 后，最容易忽略的是输入状态，而不是方法本身：

如果目标是文本节点，也可以直接把 Text 节点传给方法；如果目标是元素节点，则判断的是该元素对应的 DOM 子树与当前选区的关系。不要把 Node 误写成 CSS 选择器字符串，先通过 querySelector 或其他 DOM API 得到真实节点。

什么时候不用 containsNode

containsNode() 解决的是“当前 Selection 是否包含某个 Node”。如果你要计算精确字符偏移、把选区序列化为可恢复的范围，或者比较两个 Range 的边界，就需要继续使用 getRangeAt()、startContainer、startOffset 等 Range 信息。不要为了得到字符偏移而把 containsNode 强行扩展成另一套 API。

常见问题

containsNode 的第二个参数不传时是什么效果？

等同于传入 false：只有节点整体包含在选区内才返回 true。

部分选中文字时怎样也返回 true？

调用 selection.containsNode(node, true)。这个模式表达的是“发生过相交”，不是“节点已经完整选中”。

没有选中文字时要不要直接调用 containsNode？

可以先用 rangeCount === 0 快速返回 false，这样业务状态更明确，也避免在空选区状态下误显示操作入口。

selectionchange 中能不能缓存上一次的 Selection？

不建议。事件触发后应重新读取当前 Selection，并重新查询可能被重渲染的目标节点；缓存的旧引用很容易与当前 DOM 状态脱节。