为什么在选择开始时使用 removeAllRANges()？

Question

我有这段代码工作，我只是想了解为什么我需要在开始时使用removeAllRanges。 sel 是否在初始化时自动包含范围？

function setCaret(boolean_position) {
   var range = document.createRange();
   var sel = window.getSelection();
   range.selectNodeContents($('#board_code')[0]);
   range.collapse(boolean_position);
   sel.removeAllRanges();
   sel.addRange(range);//setting the caret position
} 

Answer 1

是的，从window.getSelection() 检索到的选择不是像document.createRange() 创建的范围那样的空实例。请注意这些方法名称的不同 - 一个创建新实例，第二个获取实例。

原因很简单——你可以有多个范围实例，每个包含不同的位置。但是每个文档只有一个选择。

因此，在添加范围之前，通常您必须删除当前选择的旧范围。当然，除非您想扩展当前选择。

更新： 正如 Tim 正确指出的那样，只有 Firefox 支持多个选择范围。这意味着只有在 Firefox 上，您才能一次选择多个 DOM - 例如。您可以选择表格的列或使用 CTRL 键添加更多选择。

因此，只有 Firefox 要求您在添加下一个之前执行removeAllRanges()。其他浏览器会自动删除旧范围。