亲宝软件园·资讯

展开

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

和平的home 人气:2
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(新添加的节点 , 被替换的节点)  替换子节点
 
 
 
 
 
 
 
 
 
 
 
 
 

加载全部内容

相关教程
猜你喜欢
用户评论