JavaScript 中 DOM 查询怎么通过 document.selection 或 window.getSelection 获取选区-js教程-PHP中文网

现代标准方式是 window.getSelection()，返回 Selection 对象以获取用户选中的纯文本（sel.toString()）、Range 数量（sel.rangeCount）及首个 Range（sel.getRangeAt(0)）；document.selection 已废弃，仅限 IE10 及更早版本使用。

javascript 中 dom 查询怎么通过 document.selection 或 window.getselection 获取选区

JavaScript 中获取用户当前选中的文本区域（选区），不能用 document.selection，因为它仅在旧版 IE（IE 10 及更早）中存在，已彻底废弃；现代浏览器统一使用 window.getSelection()。

✅ 现代标准方式：window.getSelection()

window.getSelection() 返回一个 Selection 对象，代表用户在页面中选中的内容（可跨多个元素、包含富文本）。它兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）。

调用后直接获取选区对象：const sel = window.getSelection();
常用属性：
- sel.toString() → 返回选中的纯文本内容
- sel.rangeCount → 当前选区包含的 Range 数量（通常为 1）
- sel.getRangeAt(0) → 获取第一个 Range（可用于定位、操作 DOM）
示例：点击按钮获取并弹出选中文本

document.getElementById('btn').addEventListener('click', () => {
  const sel = window.getSelection();
  if (sel.rangeCount > 0) {
    alert('你选了：' + sel.toString().trim());
  }
});

❌ document.selection 已淘汰，不要使用

document.selection 是 IE 5.5–10 的私有 API，返回 TextRange 对象，与现代 Selection 不兼容。Edge（基于 Chromium）和所有新版浏览器均不支持，且无法 polyfill。若代码中仍看到它，说明需要升级兼容逻辑。

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

IE 特有方法如 document.selection.createRange() 在其他浏览器会报错
检测时不应依赖 'selection' in document，而应优先检测 window.getSelection

? 兼容旧 IE 的写法（仅限必须支持 IE9–10 的场景）

如果项目仍需兼容 IE9–10，可做简单降级处理，但注意：IE8 及更早版本连 document.selection 的部分能力也受限，建议直接放弃支持。

安全获取选中文本的通用函数：

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString().trim();
  } else if (document.selection && document.selection.type !== 'Control') {
    return document.selection.createRange().text.trim();
  }
  return '';
}

⚠️ 注意：document.selection.type === 'Control' 表示用户选中的是多个独立元素（如多张图片），此时 .text 可能为空或不可靠，应避免直接使用。

? 实际使用建议

监听 mouseup 或 selectionchange 事件来响应选区变化（selectionchange 在 document 上触发，更精准）
对选区做 DOM 操作前，先用 getRangeAt(0) 获取 Range，再用 range.cloneContents() 或 range.surroundContents() 安全处理
在 iframe 中获取选区，需切换到对应 iframe 的 window 上调用 getSelection()