在前端开发中，经常需要操作DOM对象并进行相应的样式布局。而操作DOM对象的过程中，我们需要涉及到其位置信息，也就是文档坐标。
文档坐标是指DOM元素相对于整个文档页面左上角的位置信息。可以通过各种方式获取DOM元素的文档坐标，其中最常用的方法是使用getBoundingClientRect()函数。
getBoundingClientRect() 函数
getBoundingClientRect()函数返回一个包含DOM元素位置、宽度和高度等信息的矩形对象。该矩形对象有以下属性：
left: 元素左边缘相对于视口左边缘的距离top: 元素上边缘相对于视口顶部边缘的距离right: 元素右边缘相对于视口左边缘的距离bottom: 元素下边缘相对于视口顶部边缘的距离width: 元素宽度height: 元素高度
这些值都是相对于视口来计算的，并且会随着滚动条的滚动而改变。
示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------- ------- ---- - ------ ------ ------- ------ ----------------- ---- --------- --------- ----- ---- ---- ---- ---------- --------------- ------ - -------- ------- ------ ---- --------------- -------- ----- --- - ------------------------------- ----- ---- - ---------------------------- ----------------------- -- ----- ---------------------- -- ----- --------- ------- -------展开代码
上面的代码中，我们创建一个id为box的div元素，并设置其样式为绝对定位。然后通过getBoundingClientRect()函数获取到该元素的位置信息，并输出其左上角的文档坐标。
指导意义
理解DOM元素的文档坐标是前端开发过程中必须掌握的基础知识之一。在实际开发中，我们可以利用这些位置信息来进行各种布局操作，如动态计算元素位置、响应鼠标事件等。同时，getBoundingClientRect()函数在浏览器兼容性方面也表现良好，可以放心使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14637
