关于getBoundingClientRect，.getSelection，.getRangeAt的困惑

Question

我使用.getSelection获取所选文字，然后使用.getRangeAt(0)，然后使用.getBoundingClientRect()获取窗口位置。

以下是我的工作代码。

function getText(){
  if(window.getSelection) {
    return window.getSelection();
  } 
}

$("#textArea").mouseup(function(){
    var selection = getText();
    var oRange = selection.getRangeAt(0);
    var oRect = oRange.getBoundingClientRect();

    var left = oRect.left
    var top = oRect.top
}

我的问题是：

为什么我＆＃34;不能＆＃34;直接用吗？

mySelectedText.getSelection().getBoundingClientRect();

为什么我必须使用.getRangeAt();

这三个功能有什么区别？

1. .getSelection
2. .getRangeAt
3. .getBoundingClientRect

Answer 1

getBoundingClientRect是Element any Element的偏移量， getSelection和getRangeAt使用插入符号而不返回元素它们返回一个选择对象和一个范围对象