基于DOM的操作文档对象模型的获取元素偏移量节点使用

一、原理概念

从文件对象模型DOM角度看：每个html标签、标签属性、内容、注释…都被看成一个个的dom节点，

DOM就是我们html结构中一个一个的节点构成的。

1.dom节点分类：常用的三大分类：元素，属性，样式

元素节点：通过getElementBy... 获取到的都是元素节点

属性节点：通过getAttribute 获取的就是元素的属性节点

文本节点：通过innerText 获取到的就是元素的文本节点

2.DOM节点之间关系：根，父，子，兄弟

根节点：在HTML文档中，html就是根节点。

父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html

子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点

兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点

例如所有li是兄弟节点，因为他们拥有相同的父节点ul

二、获取元素的偏移点

就是元素在页面上的位置，属性获取（offsetLeft和offsetTop和offsetWidth和offsetHeight）

1.offsetLeft和offsetTop:

分别获取的是元素左边的偏移量和上边的偏移量

分成两个情况来看

没有定位的情况下

 获取元素边框外侧到页面内侧的距离

有定位情况下

 获取元素边框外侧到定位父级边框内侧的距离（left和top值）

2.offsetWidth和offsetHeight:获取元素  内容宽高+padding宽高 + border宽高 的和

三、获取元素尺寸（宽、高）三种方式

获取元素的宽度，包含内边距+和border  =只读 返回像素

offsetWidth=内容width + padding + border

获取元素的宽度包含内边距   =>只读属性返回元素像素宽度-外边距和滚动条是整数单位是像素

clientWidth = 内容width +padding

这是一个方法获取指定元素的css样式，获取的样式是元素在浏览器中最终渲染效果的样式

两个参数 element 获取元素（样式），伪类元素可选写

window.getComputeStyle(divEle).width = 内容width