Dom学习笔记-(一)

一、概述

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():

处理文档中的文本节点;在后代节点中查找,空文本节点删除,相邻的文本节点合并;

上一篇:制作支持 BIOS+UEFI 的 U 盘 grub2+bootmgr 引导 + deepin_recovery + deepin_iso + win_pe


下一篇:Unity优化之贴图