compareboundarypoints方法返回-1、0或1，表示当前range指定边界点相对于sourcerange对应边界点在dom树中的先后顺序：-1为前者在前，0为位置完全重合，1为前者在后。
compareBoundaryPoints 方法的返回值到底代表什么
这个方法不返回布尔值，而是返回一个数字：-1、0 或 1。很多人误以为它像 localeCompare 那样按字典序比较，其实它只描述「边界点在文档流中的先后顺序」。比如 rangeA.compareBoundaryPoints(Range.START_TO_END, rangeB) 的意思是：“rangeA 的起点” 和 “rangeB 的终点” 谁在 DOM 树中更靠前（先被遍历到）。
关键在于第一个参数——它决定了比哪两个点：
-
Range.START_TO_START：rangeA 起点 vs rangeB 起点 -
Range.START_TO_END：rangeA 起点 vs rangeB 终点 -
Range.END_TO_START：rangeA 终点 vs rangeB 起点 -
Range.END_TO_END：rangeA 终点 vs rangeB 终点
返回 -1 表示前者在后者之前；0 表示完全重合（节点+偏移量都相同）；1 表示前者在后者之后。
为什么 compareBoundaryPoints 常常返回 0 却不是“相等范围”
返回 0 只说明所比较的两个边界点物理位置一致，并不意味两个 Range 对象内容或跨度相同。例如：
const p = document.querySelector('p');
const range1 = document.createRange();
const range2 = document.createRange();
range1.selectNodeContents(p);
range2.setStart(p, 0);
range2.setEnd(p, p.childNodes.length); // 同样覆盖整个 p
// 但：
range1.compareBoundaryPoints(Range.START_TO_START, range2); // → 0
range1.compareBoundaryPoints(Range.END_TO_END, range2); // → 0
// 看似“全等”，但 range1 是 selectNodeContents 创建的，range2 是手动 set 的，
// 它们的内部表示可能不同（比如对空文本节点的处理），某些浏览器下 compareBoundaryPoints 结果不稳定
所以不能用多次 compareBoundaryPoints 返回 0 来断言两个 range 相等。真要判断是否覆盖相同内容，得比 range1.toString() === range2.toString() + 边界节点和偏移量双重校验。
跨元素或跨文本节点时 compareBoundaryPoints 的行为陷阱
当边界落在不同元素或不同文本节点中，结果取决于 DOM 树深度优先遍历顺序。比如：
<div id="a">A</div> <span id="b">B</span>
rangeA 起点设在 #a 的文本子节点开头，rangeB 起点设在 #b 的文本子节点开头 —— 那么 rangeA.compareBoundaryPoints(Range.START_TO_START, rangeB) 一定返回 -1，因为 #a 在 #b 前面被遍历。
但若起点落在同一元素内的两个相邻文本节点中（比如因 document.execCommand('insertHTML') 插入后分裂出的文本节点），顺序就容易误判。此时：
- 不要依赖单次比较结果做逻辑分支
- 涉及插入/删除操作后，应重新
range.detach()并创建新Range - 避免在
input或contenteditable实时编辑中高频调用该方法，性能差且易受浏览器 layout 时机影响
现代替代方案：用 Range.intersectsNode 或原生比较 API
compareBoundaryPoints 是旧标准，已从 DOM Living Standard 中标记为「deprecated」。Chrome 120+、Firefox 125+ 控制台会警告。真正需要判断范围关系时，优先考虑：
- 是否相交：
range1.intersectsNode(targetElement)（注意：只支持 Element，不支持 Text） - 是否包含某节点：
range1.containsNode(node, true)（第二个参数为true表示包含子树） - 获取实际位置信息：
range1.getBoundingClientRect()用于可视化判断，而非逻辑顺序
如果必须做精确边界排序（比如实现自定义光标锚定逻辑），建议封装一层 fallback：先尝试用 Range.prototype.compareBoundaryPoints，捕获 NotSupportedError 后退到遍历 range.commonAncestorContainer 的 childNodes 手动计算索引偏移 —— 这才是稳定可控的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
