DOM知识整理

由于工作中一直在用框架来解决问题，在平时对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左边的距离