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(新添加的节点 , 被替换的节点)  替换子节点