操作元素
前言
前面说过，网页三件套中，HTML负责网页的框架，CSS负责网页的样式，而JavaScript负责网页的行为。
在JavaScript中，我们可以通过DOM来操作网页中的元素，比如获取元素，修改元素，添加元素，删除元素等。这就是JavaScript操作网页行为的一种体现。
流程
与前面事件执行流程类似，操作元素也是通过事件触发，然后执行对应的操作。
首先获取事件源，然后将事件源与世界类型进行绑定，最后通过函数的方式执行。
那我们可以通过操作元素，达到一些什么样的效果呢?
接着往下面看吧。
改变元素文本内容
方式一：
element.innerHTML = "新的内容"; 替换起始位置和终止位置的内容，包括html标签；同时空格和换行会被保留。 复制代码
方式二：
element.innerText = "新的内容"; 替换起始位置和终止位置的内容，但是它会自动删除html标签，同时空格和换行也会被删除。 复制代码
两者的区别：
1. innerHTML可以获取元素中的html标签，而innerText不可以。 2. innerHTML可以获取元素中的空格和换行，而innerText不可以。 3. innerHTML可以设置元素中的html标签，而innerText不可以。innerText不能识别html标签，所以设置的时候，会将html标签当做普通文本显示。 复制代码
改变元素样式
通过js我们可以改编元素的大小，位置，颜色等等。
- 如果修改的元素样式比较少，我们可以通过element.style.属性名 = "属性值"的方式来修改。 element.style.属性 = "样式属性值"; 例如：div.style.color = "red";
此时修改的样式产生的是行内样式，css权重比较高。
- 如果修改元素的样式位于css文件中同时又比较多，我们可以通过element.className = "类名"的方式来修改。 element.className = "新的类名"; 例如：element.className = "red";
使用方法：
- 在css文件中定义一个类，例如：.red{color:red;}
- 在js中，我们通过element.className = "red"的方式来修改元素的样式。
- 最后实现效果
例子：
<style> .red{ color: red; } </style> 复制代码
<div>123123<div> 复制代码
我们通过js将red类在div被点击之后添加上去。
let redClass = document.querySelector('div'); redClass.onclick = function(){ this.className = 'red'; } 复制代码
这种方法适用于需要修改样式过多或者过于复杂的情况。
注意：className会直接覆盖掉原来的元素类名，也就是原来的样式将会丢失。
如果想要保留原来的样式，可以这样做：element.className = '原来的样式类名 后面我们添加的样式类名'，也就是多类名选择器。
改变元素属性
在html中，我们可以通过属性来设置元素的一些属性，比如id，class，src，href，alt，title等。
element.属性 = "新的属性"; 例如：img.src = "新的图片路径"; 复制代码
这些都是普通标签的元素操作，在html中有一类特殊的标签：表单标签。
表单元素：type,value,checked,selected,disable 复制代码
这些元素要如何进行操作呢?
<input type = "text" value = "123123"> 复制代码
这里有一个输入框，我们来改变里面元素的内容：
let input = document.querySelector("input"); input.onclick = function(){ input.value = "新的内容"; } 复制代码
这里我们就不能使用innerHTML或者innerText了。
