js操作DOM树

一丶DOM树
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树.如下图

二、节点查找(直接查找和间接查找)
直接查找:
DOM节点的获取方式其实就是获取事件源的方式
​ 操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

//方式一：通过id获取单个标签 
	var div1 = document.getElementById("box1");  
    
//方式二：通过 标签名 获得 标签数组，所以有div
	var arr1 = document.getElementsByTagName("div");   
    
//方式三：通过 类名 获得 标签数组，所以有p1类
	var arr2 = document.getElementsByClassName("p1");  

//其中方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。
//即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素
    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

间接查找:
​ 可以查找当前节点的 子父节点 ,兄弟节点 . 如下图👇:

1. 子节点.parentNode 返回子节点的父节点（唯一）
2. 父节点.firstChild 返回父节点的第一个子节点，包括空的文本节点
3. 父节点.firstElementChild 第一个子节点
4. 父节点.lastChild 返回父节点的最后一个子节点，包括空的文本节点
5. 父节点.lastElementChild 最后一个子节点
6. 父节点.childNodes 返回父节点所有的子节点，是一个集合，包括空的文本节点
7. 兄节点.nextSibling 返回弟节点，包含空的文本节点
8. 兄节点.nextElementSibling 返回弟节点
9. 弟节点.previousSibling 返回兄节点，包含空的文本节点
10. 弟节点.previousElementSibling 返回兄节点

三、添加节点
第一步：通过标签名来创建新节点
document.createElement(“标签名”)

克隆/复制节点 括号里面不传参只复制本身，传参true，表示复制本身及后代
要复制的节点.cloneNode()

子节点添加到末尾
父节点.appendChild(子节点)

向指定节点前插入新节点
父节点.insertBefore(要插入的节点，指定节点）
注意：添加节点第一步必写

四、删除、替换节点
父节点.removeChild(要删除的子节点)
父节点.replaceChild(参数1，参数2) 用参数1替换参数2