Javascript 什么'；选择API和范围API之间的区别是什么？

我想知道Selection API和Range API在用途上的主要区别是什么

从下面的代码片段中，我们可以看到它们以某种方式相互关联。设置一个时，将自动设置另一个的属性。甚至他们的一些方法也非常相似

// Select text from 0-5 using the Selection API
function onClick1() {
  root.focus();
  const selection = window.getSelection();
  selection.setBaseAndExtent(root.childNodes[0],0,root.childNodes[0],5);
  getSelectionInfo();
}

问题

选择API和范围API之间的主要区别是什么

const root=document.getElementById（'root'）；
const infoP=document.getElementById（'info'）；
函数onClick1（）{
root.focus（）；
const selection=window.getSelection（）；
selection.setBaseAndExtent（root.childNodes[0]，0，root.childNodes[0]，5）；
getSelectionInfo（）；
}
函数重置（）{
const selection=window.getSelection（）；
selection.removeAllRanges（）；
infoP.innerHTML=''；
}
函数onClick2（）{
root.focus（）；
const selection=window.getSelection（）；
const range=selection.getRangeAt（0）；
range.setStart（root.childNodes[0]，6）；
range.setEnd（root.childNodes[0]，9）；
getSelectionInfo（）；
}
函数getSelectionInfo（）{
const selection=window.getSelection（）；
const range=selection.getRangeAt（0）；
常量文本=`
selection.anchorNode:${selection.anchorNode}
selection.anchorOffset:${selection.anchorOffset}
selection.focusNode:${selection.focusNode}
selection.focusOffset:${selection.focusOffset}
selection.isCollapsed:${selection.isCollapsed}
selection.rangeCount:${selection.rangeCount}
selection.type:${selection.type}\n
range.collapsed:${range.collapsed}
range.commonAncestorContainer:${range.commonAncestorContainer}
range.startContainer:${range.startContainer}
range.startOffset:${range.startOffset}
range.endContainer:${range.endContainer}
range.endOffset:${range.endOffset}
`;
infoP.innerHTML=文本；
}

#根{
边框：1px点蓝色；
}
#信息{
空白：预包装；
}

123456789
设置焦点并通过选择选择1-5
重置
设置焦点并通过范围选择7-9
选择信息：

这一行解释了这一切：

const range=selection.getRangeAt（0）

选择可以有多个范围。范围可能重叠。因此-range是选择的一部分，它有自己的API
 由用户输入创建的非空选择始终包含一个范围-选择中的范围表示屏幕上选择的内容。但您也可以通过编程方式创建独立于屏幕上显示内容的范围

这意味着您可以有多个范围，但只能有一个选择（Firefox是例外，是唯一支持多个选择的主要浏览器）

与选择不同，范围也没有方向。对于选择，定位点（选择开始的位置）可以位于焦点之前或之后（选择结束的位置），具体取决于用户进行选择的方向（从左到右/从上到下或从右到左/从下到上）。但是范围不考虑方向。
说“范围是选择的一部分”是不准确的，因为选择API的
getRangeAt（）
方法依赖于范围API。此外，除了在Firefox中，您只能有一个选择。
// Select text from 7 to 9 using the Range API
function onClick2() {
  root.focus();
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  range.setStart(root.childNodes[0],6);
  range.setEnd(root.childNodes[0],9);
  getSelectionInfo();
}