dom节点及对节点的常用操作方法

dom节点及对节点的常用操作方法

在说dom节点前，先来看看页面的呈现：
dom渲染流程：
1、浏览器解析html源码，然后创建一个DOM树。
在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。

2、浏览器解析CSS代码，计算出最终的样式数据。
对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。

3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。
渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。

4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

那我们的节点大致是12种：
我们平常可见的也就文本节点，属性节点，元素节点，注释节点等…
先来看看获取节点：
childNodes：获取元素下的所有节点：返回一个数组
var box_ele = document.getElementById(“box”);
var child_nodes = box_ele.childNodes;
nodeType:辨别元素的类型
1=> 元素节点
2=> 属性节点
3=》 文本节点
4…
nodeValue：获得文本节点的值

children：获取元素下的所有元素节点：返回一个数组
var box_ele = document.getElementById(“box”);
var child_nodes = box_ele.children;

一般而言，我们多用childr。
nodeName：判定元素的类型 返回标签的大写 如：DIV SPAN等.

另外的获取：关系型节点获取
子集类：
firstChild：第一个子节点
firstElementChild：第一个元素子节点
lastChild：最后一个子节点
lastElementChild：最后一个元素子节点

兄弟类：
nextSibling：下一个节点
nextElementSibling：下一个元素节点
previousSibling：上一个节点
previousElementSibling：上一个元素节点

父级类：
parentNode：父节点

特别注意的：
属性节点：
由于属性都是在元素里边的，所以属性节点获取一定是在元素节点之上。
var box_ele = document.getElementById(“box”);
var attributes = box_ele.attributes;

这里的attributes是一个数组：
属性分为属性和属性值：
那我们可以通过之前的nodeType，nodeName，nodeValue来看看attributes里的内容：
如：
attributes[0].nodeType
attributes[0].nodeName
attributes[0].nodeValue

以上是对节点的获取，下面看一看对节点的操作：
首先看看如何穿创建一个节点；
var ele = document.createElement(“div”);
创建一个div节点
ele.innerHTML = “你好世界”;
加入内容，再放入页面中：
如何放入呢？
ele.appendChild(node) 把node节点插入到box的内部最后的位置
ele.insertBefore(newNode, existNode) 在box内，把newNode节点插入到exsitNode的前面
通过appendChild或者insertBefore都可以！

再来看看如何删除：
removeChild()：这个方法需要找到父节点再删除：
box.parentNode.removeChild(box);
box.remove();
remove：直接删除！但：兼容极差。

节点的克隆
cloneNode()：克隆当前层，不会深层次克隆。
cloneNode(true)：整层及以下都克隆。

最后就是节点替换了：
obj.replaceChild(新添加的节点 , 被替换的节点) 替换子节点