携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天juejin.cn/post/712312…
Document对象操纵节点
创建节点
document●createElement（）创建一个元素节点 就是用js创建一个html标记，他前面是document对象
创建什么标记，（）里就写什么标记名，创建完之后就是一个节点对象，创建完之后就相当于是一个空标记，创建完之后不会出现在html里，是存在一个变量里，在内存里，想加入文本，直接用获取文本节点方法并赋值，创建完想添加到body里，先找到body，再用添加节点的方法添加进去
添加节点
1、 ●appendChild（node）
说明：添加/移动节点（括号里的节点）到当前节点内部的末尾（新创建的节点）作为儿子添加进去
例子：Var divNode=document.createElement(“div”);//创建了一个div元素节点
Documents.getElementsByTagName(“body”)[0].appenChild(divNode);
2、 ●insertBefore（要添加或移动的节点，参考节点）
说明：添加到当前节点内部的参考节点前面
移动到当前节点内部的参考节点的前面
删除节点
1、●remove（）删除当前节点 想删除谁，就在remove（）前面找到那个元素节点，然后●emover();该元素节点就被删除了
2、●removeChild(node)删除当前节点的子节点node，在前面找到父亲，括号里写被删除的子元素节点
复制节点
1、●CloneNode（true），深拷贝——除了复制节点，还会复制节点内所有的内容
2、●cloneNode（flase）浅拷贝——只制节点本身，复制一个空标记
遍历然后把它输出来
替换节点
语法：●replaceChild（新节点，被替换的节点）
说明：移动原有节点来替换指定节点
创建新的节点来替换指定节点
先在●前面找到被替换的节点的父亲，再写语法
判断节点是否有子节点
语法: ●hasChildNodes()；
说明，有的话结果返回true，没有返回false
空格也是作为文本节点存在
document对象访问相关节点
1、 更改为父节点（通过儿子找父亲）
语法：●parentNode 更改对象为当前节点的父节点
●parentElement //返回当前元素的父元素节点（IE9以下不支持）
找节点大多数都是在找标记
说明：他们俩找的都是元素节点，
写法：先找到子元素节点，然后点后面写parentNode .style.border=”1px solid #f00”;
2、 通过父亲找儿子
（1） ●firstChild 找父元素的第一个子节点
说明：包括文本节点，不仅仅是元素节点，如果父元素和子元素之间有间隔（例如换行时就有空格存在），那么实际父元素有一个子节点是空格，想用它就让父子元素挨上
（2） ●lastChild 找父元素的最后一个子节点
（3） ●firstElementChild；返回的是第一个子元素节点
（4） ●lastElementChild；返回的是第一个子元素节点
（3）和（4）父子之间有空格没关系
（5）●ChildNodes;更改为子节点（包含所有子节点）的集合（下标从0开始）包含空格文本节点
（6）●Children;更改为子元素（仅仅是子元素节点）的集合（下标从0开始）
以及和方式更改为子节点（集合方式）(返回值是伪数组)通过父元素找子节点
元素节点的集合可以写for循环遍历这个数组，不能用for in遍历，返回值数组的其实都是伪数组，伪数组其实是个对象，用for in就多循环了3次
3、更改为兄弟节点（找到兄弟节点）
（1）●nextSibling 找到下一个兄弟节点（包含文本节点）
（2）●previousSibling 找到上一个兄弟节点（包含文本节点）
（3）●nextElementSibling 返回的是下一个兄弟元素节点
（4）●previousElementSibling 返回的是前一个兄弟元素节点
