web前端：论DOM中文档和元素的位置大小属性及其区别

作者:BruceChenWithBats 更新于： 2020-03-05 21:26:28

　　DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

　　换句话说，这是表示和处理一个html或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织(OMG)的规约为基础的，因此可以用于任何编程语言。

　　element.offsetLeft/Top获取元素相对于最近的有定位的父元素的坐标，如果没有有定位的父元素，则是文档坐标

　　element.scrollTop/Left获取元素滚动卷去的距离

　　element.offsetWidth/Height获取元素的宽度高度（包含边框）

　　element.clientWidth/Height获取元素的宽度高度（不包含边框）

　　element.scrollWidth/Height获取元素的内容宽度高度（包括被卷曲的部分）

　　e.pageX/Y获取鼠标的文档坐标（相对于文档而言）

　　e.clientX/Y获取鼠标的视口坐标（相对于视口而言）

　　e.screenX/Y获取鼠标的屏幕坐标（相对于整个浏览器而言）

　　window.pageY/XOfffset获取页面的滚动距离

　　DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。