document.getSelection返回的对象中的anchorNode,baseNode,extentNode和focusNode是什么？

Question

如果我在html页面中做出选择,我会:

var a = document.getSelection()

我得到一个具有四个属性的对象:

1. anchorNode
2. baseNode
3. extentNode
4. focusNode

前三个的值是相同的,即我选择的文本但它们有何不同以及使用哪个？

Answer 1

据MDN称

选择.anchorNode - 返回选择开始的节点.

选择.focusNode - 返回选择结束的节点.

因为有关于命名争论,baseNode是别名anchorNode,extentNode为focusNode

以下超出了这个问题的范围,但无论如何我会发布这个,因为我发现在某些情况下选择是一个棘手的部分.

看看这个例子:

<p>ab12<sup>3</sup>4567890 !</p>

假设我们选择了"1234567890".我已经拍了一张照片来解释锚点和焦点节点和偏移的位置.

Answer 2

我一直在构建一个需要嵌套的contenteditable元素的功能.调试时我注意到baseNode和extentNode是不是只是别名.我试图找到关于它们的文档,因为它们不在MDN中.但基于此屏幕截图,我不认为它们只是别名(在Chrome中):

Answer 3

我绝不是专家，但通过实验，在我看来，anchorNode 是选择开始的节点，而 focusNode 是选择结束的节点（大概是因为选择结束后它就有焦点）。

baseNode 似乎与anchorNode 相同，extentNode 与baseNode 相同，只是它们在Firefox 中不存在，仅在Chrome 中存在。