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(1)//元素节点

Node.TEXT_NODE(3)//文本节点

Node.DOCUMENT_NODE(9)//文档节点

......

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,0);
            }
            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():

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

Dom学习笔记-（一）

标签：

原文地址：http://www.cnblogs.com/hzQq/p/4545194.html