JavaScript DOM编程基础：节点创建与操作详解

DOM与BOM基础概念

术语学习：

DOM：文档对象模型（Document Object Model）。

BOM：浏览器对象模型。

注：亦可称为窗口对象模型（Window Object Model）。

API：应用编程接口。

注：DOM本质上可视为一种API。

Node：节点。

注：节点类型包括：元素节点、属性节点、文本节点。

元素节点包含属性节点与文本节点。

DOM树结构：

接下来直接演示DOM的具体操作方法。

创建元素节点 createElement

1. 创建元素节点：createElement()方法：

<SCRIPT LANGUAGE="JavaScript">

var a = document.createElement("p");

alert( "节点类型是 ： " +a.nodeType + " , 节点名称是： " + a.nodeName);

</SCRIPT>

输出结果：nodeType为1，a.nodeName为p；

这表明创建的是一个元素节点。你可能会疑惑，为何文档中未显示该p节点？

参考以下示例：

<body>

</body>

<SCRIPT LANGUAGE="JavaScript">

var a = document.createElement("p");

document.body.appendChild(a);

</SCRIPT>

使用Firebug查看，可见文档中已包含所需结果。

由此可见，createElement()创建的新元素节点不会自动加入文档，而是处于游离状态。若要将其加入文档，可使用appendChild()、insertBefore()或replaceChild()方法（后者后续介绍）。

创建文本节点 createTextNode

2. 创建文本节点：createTextNode()方法：

var b = document.createTextNode("my demo");

alert( "节点类型是 ： " +b.nodeType + " , 节点名称是： " + b.nodeName);

输出结果：nodeType为3，a.nodeName为＃text；

这表明创建的是一个文本节点。你可能会疑惑，为何文档中未显示该文本节点？是否也需使用appendChild()添加至文档？

正确，你的理解完全正确。

参考以下示例：

<body>

</body>

<SCRIPT LANGUAGE="JavaScript">

var mes = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(mes);//先将文本节点添加至元素节点

document.body.appendChild(container);//再将元素节点添加至文档

</SCRIPT>

复制节点 cloneNode

3. 复制节点：cloneNode(boolean)方法，含一个参数：

参考以下示例：

<body>

</body>

<SCRIPT LANGUAGE="JavaScript">

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

var newpara = container.cloneNode(false);//区分true与false

document.body.appendChild(newpara );

</SCRIPT>

查看Firebug下的结果：