因为工作中一向在用框架来解决问题,在日常平凡对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左侧的间隔