在JavaScript中，`getBoundingClientRect()` 是一个非常实用的DOM元素方法，它允许开发者获取到一个元素相对于视口（浏览器窗口）的几何信息，包括元素的顶部、底部、左侧和右侧距离浏览器边缘的具体数值。这个方法返回一个对象，包含了元素与视口的边界信息，对于布局计算、动态效果和交互设计等场景十分有用。
`getBoundingClientRect()` 方法的基本用法是调用任何DOM元素实例，例如：
```javascript
var element = document.getElementById("elementId");
var rect = element.getBoundingClientRect();
```
`rect` 对象将包含以下属性：
- `top`: 元素顶部边缘距离视口顶部的距离。
- `right`: 元素右边缘距离视口左边缘的距离。
- `bottom`: 元素底部边缘距离视口顶部的距离。
- `left`: 元素左边缘距离视口左边缘的距离。
- `width`: 元素的宽度，不包括内边距和边框。
- `height`: 元素的高度，不包括内边距和边框。
然而，需要注意的是，这些值是相对于视口的，而不是相对于文档的。这意味着，当用户滚动页面时，这些值会随着元素在视口中的位置变化而改变。此外，这些值不包括任何CSS变换，它们是元素在无变形状态下的位置。
在提供的代码示例中，作者为了兼容IE浏览器（IE会多出2个像素的偏移），通过减去`document.documentElement.clientTop` 和 `document.documentElement.clientLeft` 来修正这些值。`clientTop` 和 `clientLeft` 分别代表了浏览器的顶部和左边的非滚动区域（如工具栏、地址栏等）的高度和宽度。
```javascript
function getRect(elements) {
var rect = elements.getBoundingClientRect();
var clientTop = document.documentElement.clientTop;
var clientLeft = document.documentElement.clientLeft;
return {
top: rect.top - clientTop, // 兼容ie多出的两个px
bottom: rect.bottom - clientTop, // 距离顶部加上元素本身的高度就等于bottom的位置
left: rect.left - clientLeft, // 距离左边的位置
right: rect.right - clientLeft // 距离右边的位置就是 距离左边的位置加上元素本身的宽度
};
}
alert(getRect(box).top);
```
这段代码定义了一个名为 `getRect` 的函数，用于获取元素相对于浏览器窗口的精确位置，并考虑到可能存在的浏览器默认偏移。然后，通过调用这个函数并传入元素`box`，我们可以获取到元素的顶部距离视口顶部的距离。
总结起来，`getBoundingClientRect()` 是JavaScript中获取元素几何信息的重要工具，它可以提供元素与浏览器视口的精确相对位置，是进行精确布局和交互开发的必备技能。在实际应用中，结合其他DOM操作和CSS属性，我们可以实现诸如定位浮动元素、拖放功能、自适应布局等复杂功能。
