共计 1247 个字符，预计需要花费 4 分钟才能阅读完成。
由于工作中一直在用框架来解决问题，在平时对 dom 的关注也比较少（特别像 angular 这种自己封装了一层视图层的框架，并不建议直接操作 DOM），所以 dom 相关的知识也忘的差不多了, 这次做公司产品的官网，没有太多的交互和功能，直接用了原生 js，正好借此整理一下遗忘的 dom 的知识
DOM 中定义的一些常用接口：
EventTarget
事件接口，规定了事件的属性和方法，大多数接口都继承于此接口。
Window
继承接口：EventTarget/AbstractView
window 对象实现了这个接口，表示一个包含 DOM 文档的窗口。
Node
继承接口：EventTarget
节点接口，规定了节点的属性和方法。
Document
继承接口：Node
document 对象不仅实现了 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=instant
window.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 左边的距离