选区范围中start与end的定义及节点选择规则技术问询

一、为什么选中到"b"之前时，结束节点是<p>b</p>而非文本节点"b"？ #

当你在可编辑区域从"a"前选中到"b"前时，Chromium会把<p>b</p>作为结束节点，核心是浏览器的选择边界规范化策略：

• 块级元素（比如<p>）的起始位置，浏览器会将选择边界绑定到块级节点本身，而非内部文本节点。<p>的偏移量0就代表这个块的最开始位置，和文本节点"b"的偏移量0视觉位置一致，但浏览器优先用容器节点标记块级边界，语义更清晰。
• 而"a"前的位置紧邻文本节点"a"，浏览器直接把边界绑定到文本节点，因为文本是可编辑内容的直接载体，在块内文本的起始位置，选择边界会直接关联到文本节点。

二、锚点/焦点节点选择的通用规则 #

浏览器选择文本、内联或块级节点作为锚点（anchorNode）或焦点（focusNode），遵循以下核心逻辑：

• 文本节点：当选择边界落在文本内容中间、文本的起始/结束位置（未被块级容器边界覆盖）时，优先绑定到文本节点。比如选中"a"的一部分，或者同一<p>内文本间的选择，节点都是文本节点。
• 内联元素：如果选择边界恰好落在<span>、<em>这类内联元素的起始或结束位置，且内联元素是内容的直接容器，浏览器可能会将边界绑定到内联节点。例如选中<span>test</span>的开头，可能得到<span>节点偏移量0，而非内部文本节点。
• 块级元素：当选择边界落在块级元素的最开始（偏移量0）或最末尾（偏移量等于子节点总数）时，浏览器会绑定到块级节点。这是为了明确标记块级容器的边界，比如跨块选择时的起始/结束块节点。

三、浏览器实现的差异情况 #

DOM标准对选择边界的节点绑定细节没有做强制统一规定，不同浏览器在边缘场景下存在差异：

• Chromium系（Chrome、Edge等）：块级边界位置优先选块级节点当边界节点，文本内部选择则绑定文本节点。
• Firefox：部分场景下更倾向绑定文本节点，比如选中<p>b</p>前，可能得到文本节点"b"偏移量0。
• 这些差异属于浏览器实现层面的细节，核心是保证选择位置语义清晰，符合用户操作的直观预期。

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