一、概述
DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML。
DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构。
每一个文档包含一个根节点-文档节点,每一个文档节点包含一个子节点-文档元素。
二、Node类型
DOM1定义了一个Node接口,其由所有节点的类型实现;在javascript中Node接口由Node类型实现(除IE)。
Javascript中的所有节点都继承Node类型,所以都共享一些基本的属性和方法。
1、nodeType:节点类型
数值(1-12)
Node.ELEMENT_NODE()//元素节点 Node.TEXT_NODE()//文本节点 Node.DOCUMENT_NODE()//文档节点 ......
2、nodeName和nodeValue:
对于元素节点name是元素的标签名,value永远是null;
对于文本节点name是"#text",value是文本内容;
3、parentNode和childNodes:
父节点和子节点,子节点childNodes中保存着nodeList对象(类数组对象);
//将nodelist对象复制成一个数组(实时的快照)
var convertToArray = function(nodes){
var arr = null;
try{
arr = Array.prototype.slice.call(nodes,);
}
catch(ex){
//兼容IE8或更早版本(其nodelist实现为一个com对象,故不能用js方法)
var len = nodes.length;
arr = [];
while(len){
arr.push(nodes[--len]);
}
arr.reverse();
}
return arr;
}
4、previousSibling、nextSibling、fristChild和lastChild:
5、ownerDocument:
其指向表示整个文档的文档节点。
三、操作节点
1、appendChild():
用于向childNodes列表尾端添加一个节点,并返回新增的节点;(如果添加的节点已经是文档中的一个节点,那其只是移动下位置)
2、insertBefore():
接受两个参数:第一个是要插入的节点,第二个是参照节点(将节点查到参照节点之前),如果参照节点是null,则跟appendChild()一样;
3、replaceChild():
接受两个参数:第一个要插入的节点,第二个是要替换的节点;返回要替换的节点;
4、removeChild():
接受一个参数:要移除的节点;返回要移除的节点;
(被替换或被移除的节点仍然为文档所有,只不过在文档中没了位置!怎么彻底去除节点?)
5、cloneNode():
接受一个参数:true或false,表示进行深复制还是浅复制,深复制就是复制节点及其整个子节点树,浅复制只复制其节点本身;
(复制只复制特性不负责属性,如事件处理程序;但IE有个bug,会复制事件处理程序)
6、normalize():
处理文档中的文本节点;在后代节点中查找,空文本节点删除,相邻的文本节点合并;