JavaScript 中节点操作怎么在 Web API 中利用 Range 对象精准操作选中的 DOM 片段-js教程-PHP中文网

JavaScript中Range对象用于精准操作DOM选区，通过起点和终点节点及偏移量描述区域，支持删除、插入、包裹等操作；可从Selection获取或手动创建。

javascript 中节点操作怎么在 web api 中利用 range 对象精准操作选中的 dom 片段

JavaScript 中利用 Range 对象精准操作选中的 DOM 片段，核心在于把用户“看到的选区”转化为可编程控制的文档区域。Range 不是视觉高亮本身，而是描述这个区域的精确坐标——起点和终点各自落在哪个节点、偏移多少字符或子节点。只要拿到这个坐标，就能安全地删、插、包、移，且不破坏周边结构。

从 Selection 获取 Range 是最常用入口

用户用鼠标或键盘选中内容后，浏览器会自动维护一个 Selection 对象，它内部装着一个或多个 Range。实际开发中几乎总是取第一个：

获取当前选区：const sel = window.getSelection();
提取首个 Range：const range = sel.getRangeAt(0);（若无选区会报错，需先判断 sel.rangeCount > 0）
此时 range.startContainer 和 range.endContainer 告诉你起止在哪一节点，startOffset/endOffset 告诉你具体位置——文本节点里是字符索引，元素节点里是子节点序号。

用 extractContents 或 deleteContents 清理原内容

想替换或格式化前，通常要先移除原始选区内容。两者区别关键在返回值：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

range.deleteContents()：直接从 DOM 中删除，不返回任何东西，适合“纯清除”场景。
const frag = range.extractContents()：删除并返回一个 DocumentFragment，里面装着被移走的所有节点。你可以遍历、修改、重排后再插入，适合需要加工内容的逻辑（比如统一加 class、过滤 script 标签等）。

用 insertNode 或 surroundContents 插入新结构

清理完后，新内容要精准落回原位：

range.insertNode(node)：在 Range 起点处插入一个节点。注意它只插一次，且插入后 Range 的终点会自动移到新节点之后。适合插入图标、分隔线、内联标签等单个节点。
range.surroundContents(wrapper)：用指定 wrapper 元素把整个 Range 内容包裹起来。要求 Range 必须连续且不能跨不可包裹的边界（比如不能一半在 里一半在里）。常用于加粗、斜体、链接等。
若 surroundContents 报错，可退而求其次：先 extractContents() 拿到片段，再创建 wrapper，appendChild(frag)，最后 range.insertNode(wrapper)。


手动创建 Range 实现非交互式操作
不依赖用户选中，也能用 Range 定位任意片段：


定位文本节点某段：找到目标文本节点 textNode，调用 range.setStart(textNode, 3) 和 range.setEnd(textNode, 8)，即可圈出第 4 到第 8 个字符。
  
跨节点选取：起点设在 p 的第 0 个子节点（文本），终点设在 p 的第 2 个子节点（ 元素），就能选中“文本+标签”这一整块。
  
快速选中整个元素内容：range.selectNodeContents(element)，比手动算 offset 更简洁可靠。