要选中整个段落，必须用setstartbefore(pel)和setendafter(pel)组合，而非仅设起点；空段落或空白字符易致firstchild失效，应始终操作段落元素本身；最后需调用selection.addrange(range)才能可见。
createRange 选中整个段落前必须理解 DOM 节点位置关系
直接调用 setStartBefore 并不能“自动选中整个段落”，它只设置 Range 的起点在某个节点之前。如果目标是选中整个 <p></p> 元素（包括其所有子文本、<em></em>、<span></span> 等），关键在于：起点要设在段落开头，终点要设在段落末尾之后——而 setStartBefore 只管起点，终点得靠 setEndAfter 配合。
正确组合 setStartBefore + setEndAfter 才能覆盖整段
假设你已拿到段落元素 pEl（比如 document.querySelector('p')），下面才是可靠写法：
const range = document.createRange(); range.setStartBefore(pEl); // 起点：p 标签 opening tag 前 range.setEndAfter(pEl); // 终点：p 标签 closing tag 后
这样 Range 就完整包裹了整个 <p>...</p> 结构。常见错误是误用 setStartBefore(pEl.firstChild) —— 如果段落开头是空格、换行或有注释节点，firstChild 可能不是文本节点，导致起点偏移；更糟的是，若段落为空（<p></p>），firstChild 为 null，直接报错 InvalidNodeTypeError。
注意浏览器对空段落和 whitespace 的处理差异
Chrome 和 Firefox 在解析纯空白段落（如 <p> </p>）时，可能生成不同数量的文本节点，影响 firstChild / lastChild 的稳定性。因此永远优先操作段落自身元素，而非其子节点：
- ✅ 安全：用
pEl本身传给setStartBefore和setEndAfter - ❌ 危险：依赖
pEl.childNodes[0]或pEl.textContent.trim() === ''来判断是否为空再分支处理 - ⚠️ 注意：
setStartBefore和setEndAfter要求参数是非-null 的 Node，传undefined或null会抛TypeError
选中后需显式应用到 Selection 才可见
创建 Range 只是第一步，用户看不到任何变化。必须把 Range 加入当前 Selection：
const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range);
遗漏这步是调试时最常卡住的地方——代码没报错，但页面毫无反应。另外，如果页面有 iframe 或 shadow DOM，window.getSelection() 返回的不是主文档的 Selection，需确保上下文一致。
真正麻烦的不是语法，而是 DOM 树的实际结构总比想象中多一层 wrapper、少一个 text node；动手前先 console.dir(pEl) 看一眼 childNodes 构成，比硬猜靠谱得多。
