摘要：继承接口对象不仅实现了接口，也实现了接口，用来标识当前窗口内的文档节点。继承接口描述了所有相同种类的元素所普遍具有的方法和属性。
由于工作中一直在用框架来解决问题，在平时对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左边的距离
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99684.html
摘要：提示对象是对象的一部分，可通过属性对其进行访问。方法返回布尔值，用于检测文档或文档内的任一元素是否获取焦点。布尔值，指定事件是否在捕获或冒泡阶段执行。向元素添加事件句柄移除元素的事件句柄方法级元素参数类型描述对象必须。一、DOM对象 DOM对象整体包括： HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML D...
react知识点50问 1.react中的keys的作用 keys是react来追踪哪些元素被修改添加、删除的辅助标记 2.调用setState之后发生了什么 react会将传入的参数对象和组件的当前状态合并，根据新的状态构建新的react元素树，计算react新树和老树的差异，根据差异最小化对界面进行最小化渲染 3.react生命周期 初始化阶段：getDeaultProps（获取实例的默认p...
react知识点50问 1.react中的keys的作用 keys是react来追踪哪些元素被修改添加、删除的辅助标记 2.调用setState之后发生了什么 react会将传入的参数对象和组件的当前状态合并，根据新的状态构建新的react元素树，计算react新树和老树的差异，根据差异最小化对界面进行最小化渲染 3.react生命周期 初始化阶段：getDeaultProps（获取实例的默认p...
摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...
摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。 使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...
阅读 2520·2021-09-30 10:00
阅读 3471·2021-09-22 10:54
阅读 6118·2021-09-07 10:28
阅读 2895·2019-08-29 13:53
阅读 725·2019-08-29 12:42
阅读 942·2019-08-26 13:51
阅读 1236·2019-08-26 13:32
阅读 3000·2019-08-26 10:39
