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

Question

如果我在 html 页面中进行选择并且我这样做：

var a = document.getSelection()

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

1. 锚节点
2. 基础节点
3. 范围节点
4. 焦点节点

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

Answer 1

根据MDN

selection.anchorNode

- 返回选择开始的节点。

selection.focusNode

- 返回选择结束的节点。

因为命名上存在争议：

• baseNode 是 anchorNode
的别名
• extentNode 代表 focusNode

注意：对

baseNode

和

extentNode

的引用已从 MDN 页面删除。

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

看一下这个例子：

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

至少截至撰写本文时和 2018 年以来，至少在 Chrome 和 Safari 中：

• baseNode 是anchorNode 的别名
• baseOffset 是anchorOffset 的别名
• extentNode 是 focusNode 的别名
• extentOffset 是 focusOffset 的别名

根据这段代码：

Node* DOMSelection::baseNode() const {
  return anchorNode();
}

unsigned DOMSelection::baseOffset() const {
  return anchorOffset();
}

Node* DOMSelection::extentNode() const {
  return focusNode();
}

unsigned DOMSelection::extentOffset() const {
  return focusOffset();
}

从 Chromium 代码库中提取，最初由 Apple 构建（请参阅文件顶部的版权）。 https://github.com/chromium/chromium/blob/1c0152d0297a8341498a04087587b26ee59fbdda/third_party/WebKit/Source/core/editing/DOMSelection.cpp

2018 年更新此行为的最后一次提交： https://github.com/chromium/chromium/commit/1c0152d0297a8341498a04087587b26ee59fbdda#diff-bb3d399317d847196973eee96fb71f402f36055cfeca1e1351f1bd17c5d9c499