元素位置

• offsetParent：每一个元素都有这个属性，这个属性可以用于获取某个元素第一个定位的祖先元素，如果没有会得到 body，body 的 offsetParent 为 null
• offsetLeft ＆offsetTop：相对于该元素的 offsetParent 的坐标，注意，如果 offsetParent 是 body，则相对于整个网页，即考虑 body 的 margin 值。

有了以上三个属性，我们就可以得到某个元素相对于整个网页的位置。

function getPagePosition(dom){
	if(!dom){
		return {};
	}
	var left = 0;
	var top = 0;
	while(dom){
		left += dom.offsetLeft;
		top += dom.offsetTop;
		dom = dom.offsetParent;
	}
	return {
		left:left,
		top:top,
	};
}

• getBoundingClientRect() ：该方法可以的得到一个对象，该对象记录了当前元素基于视口的位置，如下图所示


这个方法最常见的地方是吸附效果。

事件模拟

一般情况下，事件的触发是依赖于用户操作的，但是我们可以通过 JS 来模拟事件

我们可以调用 DOM 对象的 click 方法来触发该 DOM 对象的点击事件，同样，可以触发某个 form 表单元素的 submit 事件触发提交事件。

如果要模拟其他类型的事件，可以创建一个事件对象，然后分发事件，例如我这里要出发 btn 的鼠标移入事件

var event = new MouseEvent("mouseenter",{});//第二个参数传入的是配置参数，也就是配置事件对象
btn.dispatchEvent(event);

其他

• window.scrollTop, window.pageXOffset：相当于根元素的 scrollLeft

• window.scrollLeft, window.pageYOffset：相当于根元素的 scrollTop

• window.scrollX, window.pageXOffset：相当于根元素的 scrollLeft

• window.scrollY, window.pageYOffset：相当于根元素的 scrollTop。

• resizeTo()：设置窗口尺寸

• resizeBy()：窗口尺寸在原来的基础上增加多少

只有自己创建的窗口，才可以使用 resizeTo 和 resizeBy 方法设置窗口尺寸。