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

EN

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

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>