选择API和范围API之间有什么区别？

Question

我想知道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();
}

// 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();
}

题

Selection API和Range API之间的主要区别是什么？

const root = document.getElementById('root');
const infoP = document.getElementById('info');

function onClick1() {
  root.focus();
  const selection = window.getSelection();
  selection.setBaseAndExtent(root.childNodes[0],0,root.childNodes[0],5);
  getSelectionInfo();
}

function reset() {
  const selection = window.getSelection();
  selection.removeAllRanges();
  infoP.innerHTML = '';
}

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();
}

function getSelectionInfo() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const text = `
    <b>selection.anchorNode:</b> ${selection.anchorNode}
    <b>selection.anchorOffset:</b> ${selection.anchorOffset}
    <b>selection.focusNode:</b> ${selection.focusNode}
    <b>selection.focusOffset:</b> ${selection.focusOffset}
    <b>selection.isCollapsed:</b> ${selection.isCollapsed}
    <b>selection.rangeCount:</b> ${selection.rangeCount}
    <b>selection.type:</b> ${selection.type}\n
    <b>range.collapsed:</b> ${range.collapsed}
    <b>range.commonAncestorContainer:</b> ${range.commonAncestorContainer}
    <b>range.startContainer:</b> ${range.startContainer}
    <b>range.startOffset:</b> ${range.startOffset}
    <b>range.endContainer:</b> ${range.endContainer}
    <b>range.endOffset:</b> ${range.endOffset}
  `;
  infoP.innerHTML = text;
  
}

#root {
  border: 1px dotted blue;
}

#info {
  white-space: pre-wrap;
}

<div id="root" contenteditable>123456789</div>
<button onClick="onClick1()">Set Focus and Select 1-5 via Selection</button>
<button onClick="reset()">Reset</button>
<button onClick="onClick2()">Set Focus and Select 7-9 via Range</button>
<p><b>Selection info:</b></p>
<p id="info"></p>

Answer 1

这一行解释了这一切：

const range = selection.getRangeAt(0);

选择可以有多个范围。范围可能重叠。因此 - 范围是使用自己的API进行选择的一部分。