Dom操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。

element.innerText：从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉（非标准）
element.innerHTML：起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行（标准）

利用 DOM 可以操作如下表单元素的属性：
type、value、checked、selected、disabled

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作
2. element.className类名样式操作
   注意：
   1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
   2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
   4.如果样式修改较多，可以采取操作类名方式更改元素样式。
   5.class因为是个保留字，因此使用className来操作元素类名属性
   6.className 会直接更改元素的类名，会覆盖原先的类名。
   
   自定义属性的操作

1.获取属性值
element.属性 获取属性值。获取内置属性值（元素本身自带的属性）
element.getAttribute('属性');。主要获得自定义的属性 （标准） 我们程序员自定义的属性

2.设置属性值
element.属性 = ‘值’ 设置内置属性值。设置内置属性值
element.setAttribute('属性', '值');。主要设置自定义的属性 （标准）

3.移除属性
element.removeAttribute('属性');

H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
2. 获取H5自定义属性
兼容性获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者element.dataset[‘index’] ie 11才开始支持
dataset是一个存储自定义属性的集合，所有的自定义属性都可以从这里面找到。

要把这些用的熟练必须经过很多的练习，把下面的案例都能做出就说明基本掌握了操作元素，当然，我们在学习中还是要去不断查阅文档，不断做练习。这些列出来的都只是常用的。