JS的DOM操作——元素盒子模型

盒子模型相关属性：

offsetWidth：本身宽度+边框线+左右内边距；

offsetHeight：本身高度+边框线+上下内边距；

offsetTop：相对第一个父级节点有定位属性的上偏移量；

offsetLeft：相对第一个有定位属性的父节点左偏移量；

clientWidth：本身的宽度+左右内边距;

clientHeight：本身的高度+上下内边距；

clientTop：上边框线的宽度

clientLeft：左边框线的宽度

scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)

scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)

scrollTop：滚动条向下滚动的距离；

scrollLeft：滚动条向右滚动的距离；

window.innerHeight：浏览器窗口可见区域高度；

window.innerWidth：浏览器窗口可见区域宽度;

寻找元素的父级有定位的元素有一个方法：offsetParent，dom.offsetParent返回最近的定位父级元素，如无，返回body元素，document.body.offsetParent为 null

通过offsetParent这个方法，我们可以封装一个求元素到顶部的距离：

	        let total=0;
			Object.prototype.myoffsetTop=function() {
				let baba=this.offsetParent
				total+=this.offsetTop
				if(baba){
					baba.myoffsetTop()
				}
				return total
			}
			

对于事件对象的属性：

clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

pageX、pageY：类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性