对文档树中的节点进行增删改查

文档树

所谓的文档树就是整个HTML文档，学习DOM后我们可以用js对整个文档树进行操作

 1.添加

var box=document.querySelector("#box")
//首先先获取ID为box的节点
var box2=document.createElement("div")
//创建一个div标签
box.appendChild(box2)
//将box2渲染到页面
box.insertBefore(a1,box.children[2])
//将a1插入到box的子节点的下标为2的节点前面
box.innerHTML="6666"
//innerHTML也可以添加，但是innerHTML会覆盖掉里面的所有元素
//无论是我们添加的还是里面本身就有的。
box.innerHTML+="<h1>666</h1>"
//解决方案：用一个容器将要添加的内容装起来。

2.删除

box.removeChild(box2)
//利用父元素删除box2
box2.remove()
//删除自身

3.修改

box2.className="box2"
//给box2的class属性增加box2
box2.style.backgroundColor="red"
//给box2的背景属性添加颜色
box2.style.backgroundColor=""
//添加的属性为空的话就是删除该属性

4.查看

console.log(box2)
//可以直接在控制台输出查看
//一些属性可以直接在页面查看

5.克隆

var box4=box.cloneNode()
//不会克隆事件等，只会克隆该标签和属性
var box5=box.cloneNode(true)
//克隆整个box，包括属性，还有就是他的全部后代