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>

让我们说我们做出了选择＆＃34; 1234567890＆＃34;。 我已经做了一张图片来解释锚点和焦点节点和偏移的位置。

Answer 2

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

Answer 3

我绝不是专家，但通过实验，在我看来，anchorNode是选择开始的节点，focusNode是它结束的节点（可能是因为一旦选择结束就有焦点）

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

Answer 4

anchorNode 和 focusNode - 每个浏览器都有。 baseNode 和 extentNode - 仅在 Chrome 中存在