不可忽略的DOM操作

DOM操作

javaScript 语法本身只有些基础操作（ ES : 点操作，函数…），,js 操作 html 就需要中介 DOM 定义的方法方式，js才能操作 html.
对节点的操作都是DOM操作。由节点生成的树称为文档树。

1. 节点：

   元素节点（div、p…）,
   属性节点（attributes）,
   文本节点（里面的文字，换行，空格…）,
   CDATA节点，
   实体引用名称节点，
   实体名称节点，
   处理指令节点，
   注释节点（comment）,
   文档节点，
   文档类型节点，
   文档片段节点，
   DOM声明节点

.childNodes : NodeList 获取节点方式
.childNodes .nodeType : 节点类型
.childNodes .nodeValue : 节点内的值（元素节点的.childNodes .nodeValue为Null没有意义）

2. 意义：

假设 let wrap = document.getElementById(“wrap”);
wrap.innerHTML操作将wrap里面的东西全部替换
如果你不想替换，可以用节wrap.childNodes .nodeValue 去操作里面的内容，不会改变其他节点的特性。
3. 获取节点方式

a. .childNodes 获取所有节点。
b. .children 获取标签所有的子节点（大部分都想操作元素节点）。
.children[0] 获取第一个子节点。
c. .getElementByITagName("*") 获取里面所有节点（包括子节点的子节点…） 。
d. .parentNode 获取父节点。

e. .offsetParent 获取定位父级（父级不一定有定位属性。换句话说当你的标签拥有绝对定位，它该参照谁）。
注意：fixed 没有定位父级（Null）。
f.firstChild 第一个节点（可能不是元素节点）。
g. .firstElementChild 第一个子节点（但是有兼容性问题，低版本IE不可行）。
.children[0] 获取第一个子节点，推荐使用，没有兼容性问题。
h. .lastChild 获取最后一个节点
.children.length-1 获取最后一个子节点，推荐使用，没有兼容性问题。
i. .nextElementSibling 下一个的兄弟节点（弟弟节点）
.nextSilibing （标准浏览器中）获取紧挨着的节点（可能不是 元素节点），(在IE浏览器中）获取下一个的兄弟节点
j. .previousElementSibling 紧挨着上一个兄弟节点（哥哥节点）

4. 节点的删除，添加，创建，追加（实用）

节点的删除：在原生javascript中，节点是不能自己删除自己的，只能被父节点删除。

wrap.removeChild(node1);

删除后，node1还存在于内存中，只是不存在于页面中。

注意：节点被删除后，父级中的其他节点不会发生改变（因为没有被替换）。可以用**.children**来查询里面还有几个节点（查询存储在父级中的子元素），这个方式获取的子元素的集合是动态的。

节点的增加：

let wrap = document.getElementById("wrap");
//增加节点首先要有元素节点=>先创建元素节点，再增加
//创建节点
let p = document.creatElement("p");
//推荐将需要加的样式等全部加好，再增加（渲染一次，提高性能）
p.classList.add("classname");//添加类名
p.innerHTML = "778"//添加文本
p.style.color = red;//添加颜色
//父级追加子节点(添加到后面)
wrap.appendChild(p);

//创建文本节点，可以创建所有的节点类型（看编辑器下面提示）。
let text = document.creatTextNode("这里写添加的文本");
wrap.appendChild(text);//添加文本（不覆盖）

多次添加（很多）：
文档碎片

for (let i = 0;i < 100000;i++){
	let p = document.creatElement("p");
	p.innerHTML = "778"//添加文本
	wrap.appendChild(p);
}//这样每次添加一个就append一次，效率低（时间慢）

//文档碎片解决:先文档碎片中装好，然后再加入浏览器
//推荐使用
let fra = document.creatElement.Fragment();
for (let i = 0;i < 100000;i++){
	let p = document.creatElement("p");
	p.innerHTML = "778"//添加文本
	fra.appendChild(p);
}
	wrap.appendChild(fra);//只append追加了一次，一次全加入，性能提高

基于已有元素位置的追加（追加到已有元素前面）

let wrap = document.getElementById("wrap");
let old = document.getElementById("old");
let p = document.creatElement("p");
p.innerHTML ="我想加在old元素节点的前面";
wrap.insertBefore(p,old);//追加到old前面
wrap.insertBefore(p,null);//追加到最后

欢迎大家观看指正。♪(^∇*) ~