?

Dom是浏览器管理这么一个html文档的方式，如同对xml文件一样，只不过这里用javascript来操作而不是其他语言如java、ruby。

?

下面是又看一遍Professional.JavaScript.for.Web.Developers后，对dom的一个总结，参考了一些笔记。

?

一、dom是什么

??? Dom:英文全称－Document Object Model 译成中文即是：文档对像模型．听起来很术语，其实就是文档内容的结构关系．文档类型可以是HTML或XML。

??? 熟悉xml的大都清楚，xml就是一个文档，由节点、属性等组成，我们可以利用sax或者dom4j等分析这个文档，对元素执行遍历和CRUD操作。对html也是一样，可以把javascript中操作html 理解为 用java操作xml。

?

二、dom的接口和元素

dom是文档对象模型，我们更关心dom的节点层次，节点操作。

dom的节点关系或者类层次如下（只是理解，详细情况官方的文档）：

??????????????????

? Node 是所有节点的父接口

??? Node的子接口或实现如下：

? 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)

具体到这些接口有哪些方法，子node有哪些方法，需要查看api文档。（可以下载一个javascript dom 文档）

?

三、核心的dom的接口操作（节点操作）

1，??? 创建节点。
createElement ():
var a = document.createElement(“p”);
它创建的是一个元素节点，所以 nodeType 等于 1 。
a.nodeName 将返回 p ;
注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。
如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中，自己写了一个insertAfter()方法;
比如：
var a = document.createElement(“p”);
document.body.appendChild(a);
注意： appendChild()默认是添加到文档的最后。也就是lastChild子节点。
如果想添加到某个地方，可以使用insertBefore()。
如果想在元素插入之前给元素添加属性。可以这么做：
var a = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
document.body.appendChild(a);

?

createTextNode ():
var b = document.createTextNode(“my demo”);
它创建的是一个文本节点，所以nodeType等于 3 。
b.nodeName 将返回 #text ;
跟createElement()一样，用createTextNode()创建的节点也不会自动添加到文档里。需要使用appendChild()或者insertBefore()方法或者replaceChild()方法。
他经常与createElement()配合使用，知道为什么吗？（一个元素节点，一个文本节点。）
var mes = document.createTextNode(“hello world”);
var container = document.createElement(“p”);
container.appendChild(mes);
document.body.appendChild(container);

2，??? 复制节点。
cloneNode (boolean ) :
它有一个参数。
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的区别
document.body.appendChild(newpara );
注意：
true的话：是<p>aaaa</p> 克隆。
false： 只克隆 <p></p> ，里面的文本不克隆。
可以自己写个例子，然后用 firebug 看看。

克隆后的新节点，和createTextNode()一样 不会被自动插入到文档 。需要appendChild();
另外还有一个注意： 如果克隆后，id一样，不要忘记用 setAttribute(“id” , “ another_id “);
改变新的节点的ID。

?

3，??? 插入节点。
appendChild () :
给元素追加一个子节点， 新的节点 插入到 最后。