由于工作中一直在用框架来解决问题，在平时对dom的关注也比较少（特别像angular这种自己封装了一层视图层的框架，并不建议直接操作DOM），所以dom相关的知识也忘的差不多了,这次做公司产品的官网，没有太多的交互和功能，直接用了原生js，正好借此整理一下遗忘的dom的知识 DOM中定义的一些常用接口：EventTarget事件接口，规定了事件的属性和方法，大多数接口都继承于此接口。Window继承接口：EventTarget/AbstractViewwindow对象实现了这个接口，表示一个包含DOM文档的窗口。Node继承接口：EventTarget节点接口，规定了节点的属性和方法。Document继承接口：Nodedocument对象不仅实现了Document接口，也实现了HTMLElement接口，用来标识当前窗口内的文档节点。Element继承接口：Node描述了所有相同种类的元素所普遍具有的方法和属性。HTMLElement继承接口：Element/GlobalEventHandlers所有html元素都直接或间接实现了HTMLElement接口。由于要实现一些滚动偏移相关的功能，所以整理了一些相关的属性：Window接口相关属性screenX/screenY 浏览器窗口距屏幕左侧/顶部的距离outerHeight/outerWidth 浏览器窗口的高/宽innerHeight/innerWidth 页面内容区域的高/宽scrollX/scrollY 文档已水平/垂直滚动的像素数pageXOffset/pageYOffset scrollX/scrollY的别称（浏览器兼容性更好些）Window接口相关方法Window.scroll(X,Y) 滚动窗口到文档中的指定位置（指定一个绝对位置）Window.scrollTo() 同scroll(),参数可以是横纵坐标，也可以是一个对象{top: y-coord,left: x-coord,behavior:‘auto’}//smooth(平滑滚动),instant(瞬间滚动)默认aotu=instantwindow.scrollBy(X,Y) 滚动指定的距离（相对位置）ps:window.scrollBy(0, window.innerHeight)// 滚动一页Window.scrollByLines() 按给定的行数滚动文档window.scrollByPages() 在当前文档页面按照指定的页数翻页HTMLElement接口相关属性offsetHeight 元素自身可视高度加上上下border的宽度offsetWidth 元素自身可视宽度加上左右border的宽度offsetParent 元素的父元素，如果没有就是body元素offsetTop 元素自己border顶部距离父元素顶部或者body元素border顶部的距离offsetLeft 元素自己border左边距离父元素border左边或者body元素border左边的距离