就是js提供的操作页面元素的属性和方法。
获取页面元素
- html 获取：document.documentElement
- body 获取：document.body
- head 获取：document.head
- 通过ID：document.getElementById('id名称')返回值：这个ID对应的标签/null；
- 通过class：document.getElementsByClassName('类名称')返回值：伪数组/空的伪数组；
- 通过标签名：document.getElementsByTagName('标签名') 返回值：伪数组/空的伪数组；
- 通过name属性名：document.getElementsByName('name的属性值') 返回值：伪数组/空的伪数组；（多用于input标签）
- 通过选择器：document.querySelector('css中选择器的书写样式') 返回值：伪数组（满足条件的第一个）/null
- 通过选择器：document.querySelectorAll('css中选择器的书写样式') 返回值：伪数组/空的伪数组
操作元素的样式
行内样式：既可以获取，也可以设置
语法：元素.style.样式名 = '样式值'，返回值：以字符串的形式返回结果，如果样式名有中划线，要使用数组关联法/驼峰命名法
非行内样式：只能获取，不能设置
语法：window.getComputedStyle(获取的元素).样式名，返回值：以字符串的形式返回结果，如果样式名有中划线，要使用数组关联法/驼峰命名法
操作元素的属性
-
原生属性：元素.属性名 = '属性值'
-
自定义属性
普通的自定义属性：
- 获取：元素.getAttribute(属性名)
- 设置：元素.setAttribute(属性名,'属性值')
- 删除：元素.removeAttribute(属性名)
H5自定义属性：每一个元素天生自带一个属性：dataset，里面保存的都是和H5相关的属性，H5自定义属性都是以data-开头
- 获取：元素.dataset.属性名 返回值就是该属性名对应的属性值
- 设置：元素.dataset.属性名 = '属性值'
- 删除：delete 元素.dataset.属性名
操作元素的类名
class的操作：
- 获取：元素.className 返回值：所有类名；
- 设置：元素.className='属性值' 特点：就是会替换掉之前的类名；
- 追加：元素.className +=' 属性值' 属性值前面要加个空格；
classList: *是每一个元素自带的属性，里面保存的就是所有类名*
- 添加：元素.classList.add(类名)
- 删除：元素.classList.remove(类名)
- 切换：元素.classList.toggle(类名) 如果之前有就是删除，没有就是添加
操作元素的文本内容
innerHtml:
获取：元素.innerHtml
设置：元素.innerHtml = '要设置的内容' 会完全覆盖式替换掉之前所有内容 ```会解析标签```
innerText:
获取：元素.innerText
设置：元素.innerText = '要设置的内容' 会完全覆盖式替换掉之前所有内容 ```不会解析标签，当文本输出```
value：(*一般使用在input标签上*)
获取：元素.value
设置：元素.value = '要设置的内容' 会完全覆盖式替换掉之前所有内容
获取元素尺寸
client：
获取宽度
语法：元素.clientWidth;
返回值：内容宽度+左右padding（数值型）
获取高度
语法：元素.clientHeight
返回值：内容高度+上下padding（数值型）
*如果元素不占位，获取到的尺寸为0(display：none visbility：hidden；float：left； box-sizing：border-box不适用)*
offset：
获取宽度
语法：元素.offsetWidth
返回值：内容宽度+左右padding+左右边框（数值型）
获取高度
语法：元素.offsetHeight
返回值：内容高度+上下padding+上下边框（数值型）
*如果元素不占位，获取到的尺寸为0 display：none visbility：hidden；float：left；box-sizing：border-box不适用*
获取窗口尺寸
BOM级别的获取
window．innerWidth //包括导航条
window．innerHeight //包括导航条
DOM级别的获取
document.documentElement.clientWidth //不包括导航条的窗口
document.documentElement.clientHeight //不包括导航条的窗口
获取元素的偏移量
offset：
获取的偏移量是相对于带有定位的父级元素，如果没有定位，则是相对于body
获取向上的偏移量：
元素.offsetTop //相对于带有定位的父元素的左上角padding边缘偏移量，没有找到定位父元素返回距离body左上角的距离
获取向左的偏移量：
元素.offsetLeft //*相对于带有定位的父元素的左上角padding边缘偏移量，没有找到定位父元素返回距离body左上角的距离*
client：
获取的偏移量是padding区域相对于边框的左上角的距离
获取向上的偏移量：
元素.clientTop //padding区域相对边框左上角的距离
获取向左的偏移量：
元素.clientLeft //padding区域相对边框左上角的距离
