Selection.extend() 在浏览器中不存在，所有调用均报 TypeError；浏览器选区扩展必须通过 Range 的 setStart()/setEnd() 手动重置边界并重新添加到 Selection。
Selection.extend() 在 HTML 中根本不存在 —— 这是 Word VBA 和 Android Selection API 的方法，浏览器原生 Selection 接口**不提供 extend() 方法**。所有试图调用 selection.extend() 的代码都会抛出 TypeError: selection.extend is not a function。
为什么查不到 Selection.extend() 文档？
MDN、WHATWG 规范、Chrome/Firefox/Safari 的 DevTools 都不支持该方法。你看到的 Selection.extend() 来自：
- Microsoft Word 的 VBA 对象模型（
Selection.Extend方法） - Android
android.text.Selection类（如ExtendUp()） - 部分旧版 Electron 或封装库的私有扩展（非标准）
在浏览器中硬写 selection.extend(...)，只会报错，且无法 polyfill。
浏览器里怎么真正“扩展”选区到指定节点位置？
必须绕过“扩展”这个误导性概念，改用 Range 手动重置边界，再交还给 Selection：
- 先用
window.getSelection()拿到当前选区 - 用
getRangeAt(0)取出可操作的Range（注意检查rangeCount > 0） - 调用
range.setStart(node, offset)和/或range.setEnd(node, offset)显式设置起止点 - 用
selection.removeAllRanges()清空，再selection.addRange(range)提交
示例：把选区终点扩展到某个 元素开头：
const sel = window.getSelection();
if (sel.rangeCount === 0) return;
const range = sel.getRangeAt(0);
const target = document.getElementById('target');
if (!target) return;
range.setEnd(target, 0); // 终点设为 target 节点的第一个子节点位置
sel.removeAllRanges();
sel.addRange(range);
常见误操作和坑
直接操作 anchorNode/focusNode 属性无效 —— 它们是只读的，改了也不影响实际选区。
- 用
selection.collapseToStart()或.collapseToEnd()后再试图“扩展”，容易因节点结构变化导致offset失效 -
setStart()/setEnd()的offset对Element节点是子节点索引，对Text节点才是字符索引，混用会偏移错位 - 移动端 Safari 中，
contenteditable=false区域或iframe内无法触发selectionchange，需额外监听focus+setTimeout延迟读取
真正的扩展逻辑永远落在 Range 的边界控制上，而不是幻想一个不存在的 extend() 方法。别被跨平台文档带偏，浏览器里只有 setStart/setEnd 是可靠出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
