js-DOM操作-操作元素
1.获取body元素
document.body
2.获取html元素
document.documentElement
3.获取元素
var btn = document.querySelector(‘ button’);
事件基础
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。（触发—响应的机制）
事件三要素：
- 事件源：事件被触发的对象（document.getElementById()）
- 事件类型：如何触发，什么事件（鼠标点击，键盘事件）
- 事件处理程序：通过函数赋值的方式完成
事件处理步骤：
- 获取事件源 var div = document.getEle.getElementById()
- 绑定事件 注册事件 div.onclick
- 添加事件处理程序 div.onclick = function(){ console.log()}
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
1.改变元素内容
element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHtml：起始位置到终止位置的全部内容，包括jtml标签。同时保留空格和换行
上述两种方法的区别：
innerText：不识别html标签，非标准 去除空格和换行
innerHtml：识别html标签，标准 不去除空格和换行
这个两种属性都是可读写的，可以获取元素里面的内容
2.修改元素属性 src（href，alt，title等都一致）
- 获取元素 var img = document.queryselector( ‘img’);
- 注册事件 处理程序 img.src = ‘images/zxy.jpg’;
表单元素的属性操作
3.利用DOM可以操作如下表单属性：
type、value、checked、selected、disabled
4.样式属性操作
element.style 行内样式操作
element.className 类名样式操作
注意：js里面的样式采用驼峰命名法 例如：fontSize，backgroundColor
js修改style样式操作，产生的是行内样式，css权重比较高
注意：如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名
5.排他思想
6.自定义属性的操作
获取属性值：
element.属性
element.getAttribute(‘属性’)
区别：element.属性 获取少量元素属性值(元素本身自带的属性)
element.getAttribute(‘属性’)；主要获得自定义的属性（标准）我们自定义的属性
设置属性值：
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’，’值’)
区别：
element.属性 设置内置属性值
element.setAttribute(‘属性’，’值’) 主要设置自定义的属性（标准）
移除属性值：
element.removeAttribute（’index’）
7.H5自定义属性
自定义属性的目的：是为了保存并使用数据；有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
设置H5自定义属性：
H5规定自定义属性data-开头作为属性名并且赋值
比如
获取H5自定义属性：
兼容性获取
H5新增：element.dataset.属性名
如果自定义属性里面有多个string单词，我们获取的时候采取驼峰命名法