html文档中怎么区分节点对象节点类型,JavaScript文档对象模型（DOM）——节点层次Node类型...

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树，允许添加、移除和修改页面的一部分。DOM1级为基本的文档结构即查询提供了接口。

节点层次

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

Sample Page

Hello World!

>

简单的HTML文档层次结构

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

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

1.Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的。除了IE之外，其他所有浏览器都可以访问这个类型。JavaScript中的所有节点都继承自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)

通过比较上面这些常量，可以很容易地确定节点的类型。

if (someNode.nodeType == Node.ELEMENT_NODE) {//在IE中无效

alert("Node is an element.");

}

为了确保浏览器兼容，最后还是将nodeType属性与数字值进行比较。

if (someNode.nodeType == 1) {//适用于所有浏览器

alert("Node is an element.");

}

并不是所有节点都受到Web浏览器的支持，最常用的是元素和文本节点。

1.nodeName和nodeValue属性

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

if (someNode.nodeType == 1) {//适用于所有浏览器

value = someNode.nodeName; //nodeName的值是元素的标签名

}

对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。

2.节点关系

每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它不是Array的实例。NodeList对象的独特之处在于，它实际上是基于DOM结构动态执行查询的结构，因此DOM结构的变化能够自动反映在NodeList对象中。

访问存在NodeList中的节点——可以通过方括号，也可以使用item()方法。

var firstChild = someNode.childNodes[0];

var secondChild = someNode.childNodes.item(1);

var count = someNode.childNodes.length;

length属性表示的是访问NodeList那一刻，其中包含的节点数量。

对arguments对象使用Array.prototype.slice()方法可以将其转换为数组，同样的方法，也可以将NodeList对象转换为数组。

//在IE8及之前的版本无效

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

function convertToArray(nodes) {

var array = null;

try{

array = Array.prototype.slice.call(nodes,0); //针对非IE浏览器

}catch(ex){

array = new Array();

for(var i=0, len = nodes.length; i

array.push(nodes[i]);

}

}

return array;

}

每一个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表汇总的其他节点。

节点关系

hasChildNodes()在节点包含一或多个子节点时返回true。

所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

3.操作节点

因为关系指针都是只读的，所有DOM提供了一些操作节点的方法。最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的得到更新。更新完成后，appendChild()返回新增的节点。

var returnedNode = someNode.appendChild(newNode);

alert(returnedNode == newNode); //true

alert(someNode.lastChild == newNode); //true

如果传入到appendChild()中的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置上。

var returnedNode = someNode.appendChild(someNode.firstChild);

alert(returnedNode == someNode.firstChild); //false

alert(someNode.lastChild ==someNode.lastChild); //true

如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点(previousSibling)，同时被方法返回。如果参照节点是null,则insertBefore()和appendChild()执行相同的操作。

returnedNode = someNode.insertBefore(newNode,null);

alert(newNode == someNode.lastChild); //true

returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

alert(returnedNode == newNode); //true

alert(newNode == someNode.firstChild); //true

returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点将有这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

returnedNode = someNode.replaceChild(newNode,someNode.lastChild);

如果只想移除而非替换节点，可以使用removeChild()方法。这个方法接受一个参数，即要移除的节点，被移除的节点将成为方法的返回值，

var formerFirstChild = someNode.removeChild(someNode.firstChild);

var formerFirstChild = someNode.replaceChild(someNode.lastChild);

4.其他方法

有两个方法是所有类型的节点都有的。cloneNode()和normalize()。

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

cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，如事件处理程序等。只复制特性、子节点。

normalize()，这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或接连储量俩个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中中查找上述两种情况。如果找到了空文本节点，删除它；如果找到相邻的文本节点，合并它们。