操作元素

前言

前面说过，网页三件套中，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我们可以改编元素的大小，位置，颜色等等。

1. 如果修改的元素样式比较少，我们可以通过element.style.属性名 = "属性值"的方式来修改。 element.style.属性 = "样式属性值"; 例如：div.style.color = "red";

此时修改的样式产生的是行内样式，css权重比较高。

1. 如果修改元素的样式位于css文件中同时又比较多，我们可以通过element.className = "类名"的方式来修改。 element.className = "新的类名"; 例如：element.className = "red";

使用方法：

1. 在css文件中定义一个类，例如：.red{color:red;}
2. 在js中，我们通过element.className = "red"的方式来修改元素的样式。
3. 最后实现效果

例子：

    <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了。