元素的增删改查：
1.获取元素 ：document.querySelector("")
2.创建元素：这个元素是不会渲染到页面上的，它不在DOM中
document.createElement(""):传入的字符串是标签名
增加类名：
1.可以重复添加，加多次：x.className="类名"
2.重复添加也只能加一次：x.classList.add("类名")
删除类名：
x.classList.remove("类名")
3.添加到文档树中，
x.appenChild(y):把y节点对象添加到x节点中
删除元素：
x.removeChild(y):删除x节点中的y节点对象
x.remove():把调用者的节点从文档树中删除
克隆：
x.cloneNode() 方法可创建指定的节点的精确拷贝。
x.cloneNode() 方法 拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。
如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
否则（也就是默认值，或者false），它只复制当前节点,并不会去复制其属性值和后代。
思想：节点对象怎么来的？
只有新创建的节点（通过克隆、创造出来的），然后添加进页面，才会出现，否则就是移动节点（也就是本来就有的节点）。
补充： JSON数据：js格式的对象，这种编码，这种序列的字符串
注意：数据驱动（决定）页面
开关设计：
事件会在触发时，重新执行一次函数
思想：在函数作用域外，设置一个布尔值，每次执行时要改变 变量 的布尔值为反，然后if-else做分支。
插入节点
x.insertBefore(参数1，参数2):创建了一个节点参数1插入在x的子元素参数2的前面。
参数1：新创建的节点
参数2：x的子元素
