HTML选区（Range）的端点能否定位在非叶子节点间或节点内部？

首先给出结论：完全可以将Range的起始/结束点定位在你描述的这些位置。

1. 两个段落之间的定位 #

你的示例中，两个<p>节点是<div contenteditable="true">的同级子节点。可以通过Range对象精准定位到它们之间：

• 方法一：通过父容器的子节点索引定位，比如：

  const div = document.querySelector('div[contenteditable="true"]');
  const range = document.createRange();
  // div的子节点列表中，第一个<p>是索引0，索引1就是两个<p>之间的位置
  range.setStart(div, 1);
  range.setEnd(div, 1); // 光标定位到该位置
  

• 方法二：通过节点的相邻关系定位：

  const firstP = document.querySelector('div p:first-child');
  const range = document.createRange();
  range.setStartAfter(firstP);
  range.setEndAfter(firstP);
  

在可编辑区域中，用户手动点击两个段落之间的空白处，浏览器原生也会自动创建这样的Range，将光标置于该位置。

2. 叶子节点之间的定位 #

像你举的</i>|<strong>这种场景，也就是<i>和<strong>两个兄弟节点之间的间隙，同样可以实现：
假设第二个<p>的结构是：文本节点 → <strong> → 文本节点 → <i> → <strong>，我们可以通过以下方式定位：

const p = document.querySelector('div p:last-child');
const iElement = p.querySelector('i');
const range = document.createRange();
// 直接将起始/结束点设置在<i>节点之后
range.setStartAfter(iElement);
range.setEndAfter(iElement);

或者通过父节点的子节点索引定位：

const p = document.querySelector('div p:last-child');
const range = document.createRange();
// <i>是p的第3个子节点（索引从0开始），索引4就是它后面的位置
range.setStart(p, 4);
range.setEnd(p, 4);

核心原理 #

Range对象的设计目标就是表示DOM树中任意位置的区间，它支持在任意DOM节点的间隙中设置起止点——包括元素与元素之间、元素与文本节点之间、文本节点内部的字符之间等所有可能的DOM位置。在可编辑区域中，用户的手动光标定位本质上就是创建了一个起始和结束点重合的Range对象。

内容的提问来源于stack exchange，提问作者PawkyPenguin