Javascript-14-DOM-1

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于DHTML(动态HTML)，但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

注意：IE中的所有DOM对象都是以COM对象的形式实现的，这意味折IE中的DOM对象与原生JS对象的行为或活动特点并不一致。

节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的属性结构。

文档节点是每个文档的根节点。文档节点的子节点称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是<hmtl>元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性通过特性节点表示，文档类型通过文档类型节点表示，而注释通过注释节点表示。总共有12中节点类型，这些类型都继承自一个基类型。

Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点实现。这个Node接口在JS中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型。JS中的所有节点类型都继承自Node类型，因此所有节点类型都共享者相同的基本属性和方法。

每个节点都有一个nodeType类型，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

• Node.ELEMENT_NODE(1);
• Node.ATTRIBUTE_NODE(2);
• Node.TEXT_NODE(3);
• Node.CDATA_SECTION_NODE(4);
• Node.ENTITY_REFERENCE_NODE(5);
• Node.ENTITY_NODE(6);
• Node.PROCESSING_INSTRUCTION_NODE(7);
• Node.COMMENT_NODE(8);
• Node.DOCUMENT_NODE(9);
• Node.DOCUMENT_TYPE_NODE(10);
• Node.DOCUMENT_FRAGMENT_NODE(11);
• Node.NOTATION_NODE(12);

nodeName和nodeValue属性

要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。在使用之前要先检测一下节点的类型。

节点关系

节点间的关系可以用传统的家族关系来描述，相当于把文档树比喻成家谱。

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种累数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中，

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。列表中第一个节点的previousSibling属性和最后一个节点的nextSibling属性为null。

父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点，

hasChildNodes()在节点包含一个或多个子节点的情况下返回true。所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个属性可以直接访问文档节点。

操作节点

appendChild()用于向childNodes列表的末尾添加一个节点。添加完成后appendChild()返回新增的节点，

insertBefore()插入节点，接受两个参数：要插入的节点和作为参照的节点。

replaceChild()替换节点，接受两个参数：要插入的节点和要替换的节点。

removeChild()移除节点。

cloneNode()用于创建调用这个方法的节点的一个完全相同的副本，接受一个布尔值参数表示是否执行深复制。true复制节点及其整个子节点树；false只复制节点本身，、。