操作文档树

一、对文档树中的节点进行添加

 示例代码：（以此进行后续操作的代码示例）

 <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .box1 {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

    .box2 {
      color: red;
    }
  </style>
  
<div id="box"></div>

  获取需要添加的元素box

 var box=document.querySelector("#box")

  创建元素box1:该元素不会渲染到页面上,因为它不是在文档树中而是在内存中

  var box1=document.createElement("div")    //传入的字符串是标签的名字

  添加元素:该元素会渲染到页面中 (把box1添加到box中)

 box.appendChild(box1)  //将box1添加到box中
//x.appendChild(y)  把y节点对象添加到x节点中

  给box1添加内容：

box1.innerHTML = "这是添加的box1的内容"

  给box1添加样式       

• className 为对应节点设置已有的样式
• classList 类名列表 为节点添加一个或多个类名 add函数添加类名 remove函数删除类名

  添加单个：

box.className="box"      //给box添加一个样式
box1.className="box1"  //给box1添加一个样式

  添加多个：

box1.className="box1 box2"

//相当于
box1.className="box1"
box1.className=box1.className+" box2" //注意有空格

//相当于
box1.classList.add("box1")
box1.classList.add("box2") //可以多次添加类名
box1.classList.add("box2") //重复添加只添加一次

   注：单个类名建议用className  多个类名建议用classList.add()

   删除类名：

box1.classList.remove("box2")  //移除box2保留box1的样式

注意：

当box内部添加了box1后还想继续添加其他内容时，用了innerHTML来添加会覆盖box内部的所有元素

 解决方案：创建一个元素 把哈哈哈作为该元素的innerHTML  再把它添加到box中       

box.appendChild(box1)
box.innerHTML = "哈哈哈"   //哈哈把box内部的所有元素全部覆盖了
box.innerHTML=box.innerHTML+"哈哈哈"  //解决的方法

二、对文档树中的节点进行删除

• 通过父元素删除子元素自己

var box=document.querySelector("#box")
var box1=document.createElement("div")
box.appendChild(box1)
box1.parentElement.removeChild(box1)  //删除box1

• 直接删除自己

 box1.remove()   //删除box1

• 清空自己（包括父元素的其他子元素）

box1.parentElement.innerHTML=""  //内容设置为空

三、克隆（复制）元素

• cloneNode() ：可实现节点的精确拷贝 

var box=document.querySelector("#box")
var box2=box.cloneNode()     //不会克隆事件等 只克隆当前节点（标签）
var box2=box.cloneNode(true)//连同box的子孙节点和所有的事件 一起克隆 深度克隆