文档对象模型DOM

【说明】本文转自：http://blog.sina.com.cn/s/blog_6644703f0100l35u.html

DOM定义了许多种节点类型来表示节点的多个方面：

1. 文档节点(document) -- 最顶层的节点或者说是根节点，它代表整个XHTML文档。

2. 文档类型节点(documentType) -- DTD引用(使用<!DOCTYPE>语法)的对象表现形式。

3. 文档片段节点(documentFragment) -- 可以像document一样来保存其它节点。

4. 元素节点(element) -- 表示起始标记和结束标记之间的内容。

5. 文本节点(text) -- 代表XHTML文档中幸免于难的始标记和结束标记之间。

6. 属性节点(attr) -- 代表元素节点开始标记内指定的属性。

7. CDataSection节点 -- <![CDATA[ ]]>的对象表现形式。

8. 注释节点comment -- 代表注释。

节点的属性和方法（一些）：

nodeName -- 节点的名字;

nodeValue -- 节点的值;

nodeType -- 节点的类型;

firstChild -- 指向childNodes列表中的第一个节点;

lastChild -- 指向childNodes列表中最后一个节点;

childNodes -- 所有子节点的列表;

previousSibling -- 指向前一个兄弟节点;

nextSibling -- 指向且一个兄弟节点;

hasChildNodes() -- 当childNodes包含一个或多个节点时,返回为真。

NodeList -- 节点数组;

NamedNodeMap -- 同时用数值和名字进行索引的节点表。

访问指定节点：

1. getElementsByTagName_r()方法 -- 用来返回一个包含所有的tagName(标记名)，是一 个数组; (很少用)

如<img  />的tagName是"img"：

var oImgs = document.getElementsByTagName_r("img");

2. getElementsByName()方法 (很少用)

3. getElementById()方法 (最常用)

如要访问ID为"div1"的<div  />元素：

var oDiv1 = document.getElementByIdx_x("div1");

创建和操作节点：

创建元素createElement_x()：（如创建一个p元素）-- var oP = document.createElement_x("p");

创建文本节点createTextNode()：var oText = document.createTextNode("hello");

将文本添加到元素oP里appendChild()：oP = appendChild(oText);  (添加到尾部)

将元素添加到body里：document.body.appendChild(oP);

删除节点removeChild()：（如删除body里的oP节点）-- document.body.removeChild(oP);

替换节点replaceChild(新节点，旧节点);

插入节点insertBefore(要插入的节点，插在哪个节点之前);

复制节点cloneNode()如：var Oclone = 要复制的节点.cloneNode(boolean型); 

为true是深度复制（该节点下的所有子节点）；为false是仅元素本身。

HTML DOM特征功能

获取id为oImg的src和border属性，并设置这些值：(要获取属性就点属性名)

alert(oImg.src);

alert(oImg.border);

oImg.src = "1.jpg";

oImg.border = "1";

如果要访问class属性，就要点className；因为class是ECMAScript中的一个保留字。

innerHTML(写，读)，outerHTML(读)：

如在一个空Div id为oDiv元素里添加<h1>hello</h1>  <h2>world</h2>：

oDiv.innerHTML = "<h1>hello</h1>  <h2>world</h2>";