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

如果我在html页面中进行了选择，并且：

var a = document.getSelection()

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

锚节点

基本节点

扩展节点

焦点节点

---

前三个值是相同的，即我选择的文本，但它们有什么不同，使用哪一个

我决不是专家，但通过实验，我觉得锚点节点是选择开始的节点，焦点节点是选择结束的节点（大概是因为选择结束后它就有焦点了）

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

根据

selection.anchorNode

-返回选择开始的节点

selection.focusNode

-返回选择结束的节点

因为有关于命名的争论：

• baseNode是anchorNode的别名
• extentNode用于focusNode

注意：对

baseNode

和

extentNode

的引用已从MDN页面中删除

下面的内容超出了这个问题的范围，但我还是要发布这篇文章，因为我发现在某些场景中，选择是一个棘手的部分

看看这个例子：

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

ab1234567890

假设我们选择了“1234567890”。 我制作了一张图片来解释锚定和焦点节点以及偏移的位置

---

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

---

anchorNode和focusNode-每个浏览器中都有。

---

baseNode和extentNode-在某些情况下，只有在Chrome中，baseNode和extentNode与anchorNode和focusNode不匹配时，才会出现一些不一致（可能是错误）。我看不出有任何理由使用它们。这张照片做得不错！请注意，baseNode和extentNode都已从MDN页面中删除。OP询问的是它们之间的区别，而不是它们的浏览器兼容性。我认为OP想要一个像“anchorNode包含……而focusNode表示……”这样的答案