DOM启蒙——第五章
1.CSSOM视图模块中规范了操作元素节点的可视化表象的API。
3.getBoundingClientRect()获取元素相对于视区的Top、Right、Bottom及Left边沿偏移量。
4.获取元素在视区中的尺寸(边框+填充+内容)
5.获取元素在视区中的尺寸(填充+内容 ，不含边框)
6.使用elementFromPoint()获取视区中某一特定上最顶层的元素
7.使用scrollHeight和scrollWidth获取滚动元素的尺寸
8.scrollTop和scrollLeft获取并设置从上、左边滚动的距离
9.使用scrollIntoView()滚动元素到视区。
2.获取元素相对于offsetParent的offsetTop及offsetLeft值
使用offsetTop和offsetLeft属性可以获取元素节点相对于offsetParent的偏移像素量，这些元素节点属性告诉我们某元素上部与左侧边框最外沿到offsetParent上部与左侧边框内侧的距离，以像素为单位。
●offsetParent的值判定依据为查找离该元素最近的CSS定位值
不为static的祖先元素，如果没找到，则body元素为offsetParent值。
●若在查询先祖过程中，找到<td>、<th>或者<table>元素且定位值为static，则它将成为offsetParent的值。
P.appendChild(document.createTextNode(div.offsetParent));//body
P.appendChild(document.createTextNode(div.offsetLeft));//最外侧与body距离 60px
P.appendChild(document.createTextNode(div.offsetTop));//最上边与body距离 60px
●若将父元素div的定位由static改为absolute，则div.offsetLeft与offsetTop将会改变。
●当offsetParent是<body>且<body>或者<html>有可见的边距、填充或者边框值时，从内边框开始丈量。
offsetParent、offsetTop和offsetLeft都是HTMLElement对象上的扩展。
使用getBoundingClientRect()方法可以获取元素外边沿的位置。
在元素上调用getBoundingClientRect()方法，将会返回一个对象，包含top、right、bottom、left;
var divEdges=div.getBoundingClientRect()
P.appendChild(document.createTextNode(divEdges.top+" ,"+divEdges.right+" ,"+divEdges.bottom+" ,"+divEdges.left))
这四个值都是元素最外沿到offsetParent的左内或上内框的距离。
getBoundingClientRect()方法返回值中还包含了height和width，height和width为元素的尺寸。完整尺寸是根据区块内容以及它的填充和边框相加得到的。
P.appendChild(document.createTextNode("height:"+divEdges.height+" width:"+divEdges.width))
width和height属性值也可以用offsetWidth、offsetHeight属性获取。
P.appendChild(document.createTextNode("height:"+div.offsetHeight+" Width:"+div.offsetWidth));
clientWidth和clientHeight属性返回元素内容与其填充相加得到的尺寸，不包括边框尺寸。
P.appendChild(document.createTextNode("clientHeight:"+div.clientHeight+" clientWidth:"+div.clientWidth));
使用elementFromPoint()可以取得HTML文档中某一特定坐标点上最顶层的元素的引用。传入的参数为视区左与上坐标位置
P.appendChild(document.createTextNode(document.elementFromPoint(50,50)));
P.appendChild(document.createTextNode("scrollHeight:"+div.scrollHeight+" scrollWidth:"+div.scrollWidth));
scrollTop和scrollLeft都是可读写的，返回可滚动视区中因为滚动而暂时不可见的元素距离左边或者上边的距离。
选取可滚动节点中某一节点后，我们可以使用scrollIntoView()方法使选取节点滚动到可视区域。
document.querySelector("#flow").scrollIntoView(true);
通过给scrollIntoView()方法传递true为参数，告诉它滚动到被滚动元素的顶部，不传递参数时默认也为true,滚动到底部则应该传入false.