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

Question

我想知道选择 API 和范围 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();
}

问题

选择 API 和范围 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。

Answer 2

由用户输入创建的非空选择始终包含一个范围 - 选择中的范围表示屏幕上选择的内容。但您也可以通过编程方式创建独立于屏幕上显示内容的范围。

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

与选择不同，范围也没有方向。通过选择，锚点（选择开始的地方）可以位于焦点（选择结束的地方）之前或之后，具体取决于用户进行选择的方向（left-to-right/top-to-bottom 或 right-to-left/bottom-to-top） .但是范围不考虑方向。

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

What's the difference between selection API and range API?

javascript

selection-api