使用DOM技术操纵文档

java 代码

 

1. [资料]JS使用DOM技术操纵文档 -- 创亿无限|创意无限|创意| -- 编程爱好者BLOG  
2.   
3.   
4.   
5. JavaScript高级应用：使用DOM技术操纵文档  
6. 我们知道，如果使用DHTML对象模型对文档的内容进行操纵，就必须了解相关文档元素的特殊属性和方法。因为文档的元素有很多种，相应的属性和方法也就非常多，为了实现一个功能，开发人员不得不查询许多资料。但是有了DOM技术，一切变得简单起来，那些操纵文档内容的属性和方法具备了元素无关性（element-independent）特点，这使得我们能够按照相同的步骤操纵文档内容。毋庸置疑，DOM技术为开发人员在对象层次上操纵文档提供了最便捷的手段。  
7.   
8.   
9. 本文就为你全面介绍在JavaScript中如何使用DOM属性和方法操纵文档内容。  
10.   
11.   
12. 使用data、nodeValue和src属性  
13.   
14.   
15. DOM提供了2个属性用于修改文本节点的内容，它们是data和nodeVaule。2个属性实现的功能相同，语法是：object.data="new 
16. value"或者object.nodeVaule="new 
17. value"，其中object代表页面中的文本项节点。如果修改图形文件的内容，语法是：object.src=../../"new 
18. value"，其中object表示页面中的img标记节点。来看看下面的例子：  
19.   
20.   
21. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
22.   
23. ＜BODY ID="bodyNode"＞  
24.   
25. This is the document body  
26.   
27. ＜P ID = "p1Node"＞This is paragraph 1.＜/P＞  
28.   
29. ＜P ID = "p2Node"＞This is paragraph 2.＜/P＞  
30.   
31. ＜P ID = "p3Node"＞This is paragraph 3.  
32.   
33. ＜IMG ID = "imgNode" SRC="myexam.gif"＞This text follows the image  
34.   
35. ＜TABLE ID="tableNode"＞  
36.   
37. ＜TR＞＜TD BGCOLOR=yellow＞This is row 1, cell 1＜/TD＞＜TD  
38. BGCOLOR=orange＞This is row 1, cell 2＜/TD＞＜/TR＞  
39.   
40. ＜TR＞＜TD BGCOLOR=red＞This is row 2, cell 1＜/TD＞＜TD BGCOLOR=magenta＞This  
41. is row 2, cell 2＜/TD＞＜/TR＞  
42.   
43. ＜TR＞＜TD BGCOLOR=lightgreen＞This is row 3, cell 1＜/TD＞＜TD  
44. BGCOLOR=beige＞This is row 3, cell 2＜/TD＞＜/TR＞  
45.   
46. ＜/TABLE＞  
47.   
48. ＜/P＞  
49.   
50. ＜P ID = "p4Node"＞This is paragraph 4.＜/P＞  
51.   
52. ＜SCRIPT LANGUAGE="JavaScript"＞  
53.   
54. ＜!--  
55.   
56. alert(  
57.   
58. "页面初始状态" + "\n\n" +  
59.   
60. "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" +  
61.   
62. "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n"  
63.   
64. );  
65.   
66. bodyNode.firstChild.nodeValue = "This is the new document body, set by 
67. the nodeValue property";  
68.   
69. p3Node.childNodes[1].src = "myexam2.gif";  
70.   
71. alert(  
72.   
73. "对页面内容进行修改后" + "\n\n" +  
74.   
75. "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" +  
76.   
77. "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +  
78.   
79. "p3Node.childNodes[1].src = " + p3Node.childNodes[1].src  
80.   
81. );  
82.   
83. // --＞  
84.   
85. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
86.   
87. 上述代码首先显示页面的初始内容以及节点p1Node的相关属性值，然后对节点bodyNode的第1个孩子节点的nodeValue属性进行赋值修改其文本内容，对节点p3Node的第2个孩子节点（也就是了img标记）的src属性进行赋值修改图形的内容。点击这里运行这个实例。  
88.   
89. JavaScript高级应用：使用DOM技术操纵文档  
90. 使用createElement方法  
91.   
92.   
93. createElement方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点，而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记，比如＜  
94. P＞、＜ FONT＞和＜ TABLE＞。CreateElement的语法为document.createElement(HTMLTag)，HTMLTag表示要创建的HTML标记，返回值是创建的孤立HTML标记节点。来看看下面的例子：  
95.   
96.   
97. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
98.   
99. ＜BODY ID="bodyNode"＞  
100.   
101. ＜SCRIPT LANGUAGE="JavaScript"＞  
102.   
103. ＜!--  
104.   
105. alert("页面初始状态");  
106.   
107. tableObj = document.createElement("TABLE");  
108.   
109. tbodyObj = document.createElement("TBODY");  
110.   
111. trObj = document.createElement("TR");  
112.   
113. tdObj = document.createElement("TD");  
114.   
115. alert(  
116.   
117. "对页面内容进行修改后" + "\n" +  
118.   
119. "bodyNode.firstChild = " + bodyNode.firstChild + "\n" +  
120.   
121. "tableObj.nodeName = " + tableObj.nodeName + "\n" +  
122.   
123. "tbodyObj.nodeName = " + tbodyObj.nodeName + "\n" +  
124.   
125. "trObj.nodeName = " + trObj.nodeName + "\n" +  
126.   
127. "tdObj.nodeName = " + tdObj.nodeName + "\n" +  
128.   
129. "tableObj = " + tableObj + "\n"  
130.   
131. );  
132.   
133. // --＞  
134.   
135. ＜/SCRIPT＞  
136.   
137. ＜/BODY＞  
138.   
139. ＜/HTML＞  
140.   
141.   
142. 上述代码在文档中创建了4个孤立HTML标记节点tableObj、tbodyObj、trObj和tdObj，它们就象太空中4颗人造卫星一样，彼此间以及和文档中的现有节点间都互不关联。创建孤立节点的目的不是为了让它真正孤立，随后我们会介绍如何将创建的孤立节点彼此相连，并添加到文档的DOM  
143. Tree结构中。点击这里运行这个实例。  
144.   
145.   
146. 使用createTextNode方法  
147.   
148.   
149. createTextNode方法的功能与creatElement方法几乎相同，唯一不同的就是它是在文档中创建一个孤立文本项节点，这个孤立节点的唯一信息就是它所代表的字符串值。createTextNode的语法为document.  
150. createTextNode (string)，string表示要创建的文本项内容，返回值是创建的孤立文本项节点。来看看下面的例子：  
151.   
152. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
153.   
154. ＜BODY ID="bodyNode"＞  
155.   
156. ＜SCRIPT LANGUAGE="JavaScript"＞  
157.   
158. ＜!--  
159.   
160. alert("页面初始状态");  
161.   
162. row1cell1Obj = document.createTextNode("This is row 1, cell 1");  
163.   
164. row1cell2Obj = document.createTextNode("This is row 1, cell 2");  
165.   
166. row2cell1Obj = document.createTextNode("This is row 2, cell 1");  
167.   
168. row2cell2Obj = document.createTextNode("This is row 2, cell 2");  
169.   
170. row3cell1Obj = document.createTextNode("This is row 3, cell 1");  
171.   
172. row3cell2Obj = document.createTextNode("This is row 3, cell 2");  
173.   
174. alert(  
175.   
176. "对页面内容进行修改后" + "\n" +  
177.   
178. "row1cell1Obj.firstchild = " + row1cell1Obj.firstChild + "\n" +  
179.   
180. "row1cell1Obj.nodeName = " + row1cell1Obj  
181.   
182. );  
183.   
184. // --＞  
185.   
186. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
187.   
188.   
189. 上述代码在文档中创建了6个孤立文本项节点，它们表示一个3行2列大小Table的单元格内容。点击这里运行这个实例。  
190.   
191. JavaScript高级应用：使用DOM技术操纵文档  
192. 使用cloneNode方法  
193.   
194.   
195. cloneNode方法的功能是通过克隆（也就是复制）文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型，新创建的孤立节点或者是HTML标记节点，或者是包含字符串信息的文本项节点。cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true)，oldNode表示被克隆的节点，返回值是新创建的节点，false表示仅仅克隆oldNode，true表示克隆oldNode并包含其下属节点。来看看下面的例子：  
196.   
197. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
198.   
199. ＜BODY ID="bodyNode"＞  
200.   
201. ＜SCRIPT LANGUAGE="JavaScript"＞  
202.   
203. ＜!--  
204.   
205. alert("页面初始状态");  
206.   
207. tableObj = document.createElement("TABLE");  
208.   
209. tbodyObj = document.createElement("TBODY");  
210.   
211. tr1Obj = document.createElement("TR");  
212.   
213. tr2Obj = tr1Obj.cloneNode(false);  
214.   
215. tr3Obj = tr1Obj.cloneNode(false);  
216.   
217. tr1td1Obj = document.createElement("TD");  
218.   
219. tr1td2Obj = tr1td1Obj.cloneNode(false);  
220.   
221. tr2td1Obj = tr1td1Obj.cloneNode(false);  
222.   
223. tr2td2Obj = tr1td1Obj.cloneNode(false);  
224.   
225. tr3td1Obj = tr1td1Obj.cloneNode(false);  
226.   
227. tr3td2Obj = tr1td1Obj.cloneNode(false);  
228.   
229. row1cell1Obj = document.createTextNode("This is row 1, cell 1");  
230.   
231. row1cell2Obj = row1cell1Obj.cloneNode(false);  
232.   
233. row2cell1Obj = row1cell1Obj.cloneNode(false);  
234.   
235. row2cell2Obj = row1cell1Obj.cloneNode(false);  
236.   
237. row3cell1Obj = row1cell1Obj.cloneNode(false);  
238.   
239. row3cell2Obj = row1cell1Obj.cloneNode(false);  
240.   
241. row1cell2Obj.nodeValue = "This is row 1, cell 2";  
242.   
243. row2cell1Obj.nodeValue = "This is row 2, cell 1";  
244.   
245. row2cell2Obj.nodeValue = "This is row 2, cell 2";  
246.   
247. row3cell1Obj.nodeValue = "This is row 3, cell 1";  
248.   
249. row3cell2Obj.nodeValue = "This is row 3, cell 2";  
250.   
251. alert(  
252.   
253. "对页面内容进行修改后" + "\n" +  
254.   
255. "row1cell2Obj.firstChild = " + row1cell2Obj.firstChild+ "\n" +  
256.   
257. "row1cell2Obj = " + row1cell2Obj + "\n" +  
258.   
259. "row3cell2Obj.nodeValue = " + row3cell2Obj.nodeValue + "\n" +  
260.   
261. "tr3td2Obj.nodeName = " + tr3td2Obj.nodeName + "\n"  
262.   
263. );  
264.   
265. // --＞  
266.   
267. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
268.   
269. 上述代码中值得注意的是对文本项节点的处理方式：  
270.   
271.   
272. 1、首先，使用语句row1cell1Obj = document.createTextNode("This is row 1, cell 
273. 1")创建单元格（1，1）所在节点；  
274.   
275. 2、然后使用语句row1cell1Obj.cloneNode(false)分别创建其他单元格节点；  
276.   
277. 3、最后，使用语句node.nodeValue = string分别为不同单元格赋值。  
278.   
279.   
280. 点击这里运行这个实例。  
281.   
282. JavaScript高级应用：使用DOM技术操纵文档  
283. 使用appendChild方法  
284.   
285.   
286. appendChild方法的功能是在2个节点间建立起父子关系，如果作为父亲的节点已经具有了孩子节点，那么新添加的孩子节点被追加为最后一个孩子，也就是lastChild。appendChild的语法是fatherObj.appendChild(childObj)，返回值是被追加的孩子节点。来看看下面的例子：  
287.   
288.   
289. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
290.   
291. ＜BODY ID="bodyNode"＞  
292.   
293. ＜SCRIPT LANGUAGE="JavaScript"＞  
294.   
295. ＜!--  
296.   
297. alert("页面初始状态");  
298.   
299. tableObj = document.createElement("TABLE");  
300.   
301. tbodyObj = document.createElement("TBODY");  
302.   
303. tr1Obj = document.createElement("TR");  
304.   
305. tr2Obj = tr1Obj.cloneNode();  
306.   
307. tr3Obj = tr1Obj.cloneNode();  
308.   
309. tr1td1Obj = document.createElement("TD");  
310.   
311. tr1td2Obj = tr1td1Obj.cloneNode();  
312.   
313. tr2td1Obj = tr1td1Obj.cloneNode();  
314.   
315. tr2td2Obj = tr1td1Obj.cloneNode();  
316.   
317. tr3td1Obj = tr1td1Obj.cloneNode();  
318.   
319. tr3td2Obj = tr1td1Obj.cloneNode();  
320.   
321. row1cell1Obj = document.createTextNode("This is row 1, cell 1");  
322.   
323. row1cell2Obj = row1cell1Obj.cloneNode();  
324.   
325. row2cell1Obj = row1cell1Obj.cloneNode();  
326.   
327. row2cell2Obj = row1cell1Obj.cloneNode();  
328.   
329. row3cell1Obj = row1cell1Obj.cloneNode();  
330.   
331. row3cell2Obj = row1cell1Obj.cloneNode();  
332.   
333. row1cell2Obj.nodeValue = "This is row 1, cell 2";  
334.   
335. row2cell1Obj.nodeValue = "This is row 2, cell 1";  
336.   
337. row2cell2Obj.nodeValue = "This is row 2, cell 2";  
338.   
339. row3cell1Obj.nodeValue = "This is row 3, cell 1";  
340.   
341. row3cell2Obj.nodeValue = "This is row 3, cell 2";  
342.   
343. returnValue = tableObj.appendChild(tbodyObj);  
344.   
345. tbodyObj.appendChild(tr1Obj);  
346.   
347. tbodyObj.appendChild(tr2Obj);  
348.   
349. tbodyObj.appendChild(tr3Obj);  
350.   
351. tr1Obj.appendChild(tr1td1Obj);  
352.   
353. tr1Obj.appendChild(tr1td2Obj);  
354.   
355. tr2Obj.appendChild(tr2td1Obj);  
356.   
357. tr2Obj.appendChild(tr2td2Obj);  
358.   
359. tr3Obj.appendChild(tr3td1Obj);  
360.   
361. tr3Obj.appendChild(tr3td2Obj);  
362.   
363. tr1td1Obj.appendChild(row1cell1Obj);  
364.   
365. tr1td2Obj.appendChild(row1cell2Obj);  
366.   
367. tr2td1Obj.appendChild(row2cell1Obj);  
368.   
369. tr2td2Obj.appendChild(row2cell2Obj);  
370.   
371. tr3td1Obj.appendChild(row3cell1Obj);  
372.   
373. tr3td2Obj.appendChild(row3cell2Obj);  
374.   
375. bodyNode.appendChild(tableObj);  
376.   
377. alert("对页面内容进行修改后");  
378.   
379. // --＞  
380.   
381. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
382.   
383. 上面的代码演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点，然后使用appendChild将这些节点进行连接形成一个Table，最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。点击这里运行这个实例  
384.   
385. JavaScript高级应用：使用DOM技术操纵文档  
386. 使用applyElement方法  
387.   
388.   
389. applyElement方法的功能是将一个节点与它的孩子节点和父亲节点脱离，然后将另外一个节点连接到这个节点，最终使它们成为父子关系。applyElement的语法是childObj.applyElement(fatherObj)，返回值是被连接的孩子节点。  
390.   
391.   
392. 我们注意到，applyElement和appendChild实现的目的基本相同，都是在2个节点间建立父子关系，但有2个区别：  
393.   
394.   
395. 1、applyElement方法只能操纵HTML标记节点，不能处理文本项节点。appendNode则能处理2种节点。  
396.   
397. 2、appendNode对2个节点的连接方式是从父到子，applyElement则是从子到父。  
398.   
399.   
400. 来看看下面的例子：  
401.   
402.   
403. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
404.   
405. ＜BODY ID="bodyNode"＞  
406.   
407. ＜SCRIPT LANGUAGE="JavaScript"＞  
408.   
409. ＜!--  
410.   
411. alert("页面初始状态");  
412.   
413. tableObj = document.createElement("TABLE");  
414.   
415. tbodyObj = document.createElement("TBODY");  
416.   
417. tr1Obj = document.createElement("TR");  
418.   
419. tr2Obj = tr1Obj.cloneNode();  
420.   
421. tr3Obj = tr1Obj.cloneNode();  
422.   
423. tr1td1Obj = document.createElement("TD");  
424.   
425. tr1td2Obj = tr1td1Obj.cloneNode();  
426.   
427. tr2td1Obj = tr1td1Obj.cloneNode();  
428.   
429. tr2td2Obj = tr1td1Obj.cloneNode();  
430.   
431. tr3td1Obj = tr1td1Obj.cloneNode();  
432.   
433. tr3td2Obj = tr1td1Obj.cloneNode();  
434.   
435. row1cell1Obj = document.createTextNode("This is row 1, cell 1");  
436.   
437. row1cell2Obj = row1cell1Obj.cloneNode();  
438.   
439. row2cell1Obj = row1cell1Obj.cloneNode();  
440.   
441. row2cell2Obj = row1cell1Obj.cloneNode();  
442.   
443. row3cell1Obj = row1cell1Obj.cloneNode();  
444.   
445. row3cell2Obj = row1cell1Obj.cloneNode();  
446.   
447. row1cell2Obj.nodeValue = "This is row 1, cell 2";  
448.   
449. row2cell1Obj.nodeValue = "This is row 2, cell 1";  
450.   
451. row2cell2Obj.nodeValue = "This is row 2, cell 2";  
452.   
453. row3cell1Obj.nodeValue = "This is row 3, cell 1";  
454.   
455. row3cell2Obj.nodeValue = "This is row 3, cell 2";  
456.   
457. tr1td1Obj.appendChild(row1cell1Obj);  
458.   
459. tr1td2Obj.appendChild(row1cell2Obj);  
460.   
461. tr2td1Obj.appendChild(row2cell1Obj);  
462.   
463. tr2td2Obj.appendChild(row2cell2Obj);  
464.   
465. tr3td1Obj.appendChild(row3cell1Obj);  
466.   
467. tr3td2Obj.appendChild(row3cell2Obj);  
468.   
469. tr1td1Obj.applyElement(tr1Obj);  
470.   
471. tr1Obj.appendChild(tr1td2Obj);  
472.   
473. tr2td1Obj.applyElement(tr2Obj);  
474.   
475. tr2Obj.appendChild(tr2td2Obj);  
476.   
477. tr3td1Obj.applyElement(tr3Obj);  
478.   
479. tr3Obj.appendChild(tr3td2Obj);  
480.   
481. tr1Obj.applyElement(tbodyObj);  
482.   
483. tbodyObj.appendChild(tr2Obj);  
484.   
485. tbodyObj.appendChild(tr3Obj);  
486.   
487. returnValue = tbodyObj.applyElement(tableObj);  
488.   
489. bodyNode.appendChild(tableObj);  
490.   
491. alert("对页面内容进行修改后");  
492.   
493. // --＞  
494.   
495. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
496.   
497. 上面的代码同样演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点，然后混合使用applyElement和appendChild将这些节点进行连接形成一个Table，最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。点击这里运行这个实例。  
498.   
499. JavaScript高级应用：使用DOM技术操纵文档  
500.  使用insertBefore方法  
501.   
502.   
503. insertBefore方法的功能和appendChild相似，都是将一个孩子节点连接到一个父亲节点，但insertBefore方法允许我们指定孩子节点的位置。insertBefore的语法是fatherObj.insertBefore(childObj,  
504. brotherObj)，返回值是被连接的孩子节点。执行后，childObj的位置在brotherObj之前。来看看下面的例子：  
505.   
506. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
507.   
508. ＜BODY ID="bodyNode"＞  
509.   
510. ＜SCRIPT LANGUAGE="JavaScript"＞  
511.   
512. ＜!--  
513.   
514. alert("页面初始状态");  
515.   
516. tableObj = document.createElement("TABLE");  
517.   
518. tbodyObj = document.createElement("TBODY");  
519.   
520. tr1Obj = document.createElement("TR");  
521.   
522. tr2Obj = tr1Obj.cloneNode();  
523.   
524. tr3Obj = tr1Obj.cloneNode();  
525.   
526. tr1td1Obj = document.createElement("TD");  
527.   
528. tr1td2Obj = tr1td1Obj.cloneNode();  
529.   
530. tr2td1Obj = tr1td1Obj.cloneNode();  
531.   
532. tr2td2Obj = tr1td1Obj.cloneNode();  
533.   
534. tr3td1Obj = tr1td1Obj.cloneNode();  
535.   
536. tr3td2Obj = tr1td1Obj.cloneNode();  
537.   
538. row1cell1Obj = document.createTextNode("This is row 1, cell 1");  
539.   
540. row1cell2Obj = row1cell1Obj.cloneNode();  
541.   
542. row2cell1Obj = row1cell1Obj.cloneNode();  
543.   
544. row2cell2Obj = row1cell1Obj.cloneNode();  
545.   
546. row3cell1Obj = row1cell1Obj.cloneNode();  
547.   
548. row3cell2Obj = row1cell1Obj.cloneNode();  
549.   
550. row1cell2Obj.nodeValue = "This is row 1, cell 2";  
551.   
552. row2cell1Obj.nodeValue = "This is row 2, cell 1";  
553.   
554. row2cell2Obj.nodeValue = "This is row 2, cell 2";  
555.   
556. row3cell1Obj.nodeValue = "This is row 3, cell 1";  
557.   
558. row3cell2Obj.nodeValue = "This is row 3, cell 2";  
559.   
560. returnValue = tableObj.insertBefore(tbodyObj);  
561.   
562. tbodyObj.insertBefore(tr3Obj);  
563.   
564. tbodyObj.insertBefore(tr2Obj, tr3Obj);  
565.   
566. tbodyObj.insertBefore(tr1Obj, tr2Obj);  
567.   
568. tr1Obj.insertBefore(tr1td2Obj);  
569.   
570. tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);  
571.   
572. tr2Obj.insertBefore(tr2td2Obj);  
573.   
574. tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);  
575.   
576. tr3Obj.insertBefore(tr3td2Obj);  
577.   
578. tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);  
579.   
580. tr1td2Obj.insertBefore(row1cell2Obj);  
581.   
582. tr1td1Obj.insertBefore(row1cell1Obj);  
583.   
584. tr2td2Obj.insertBefore(row2cell2Obj);  
585.   
586. tr2td1Obj.insertBefore(row2cell1Obj);  
587.   
588. tr3td2Obj.insertBefore(row3cell2Obj);  
589.   
590. tr3td1Obj.insertBefore(row3cell1Obj);  
591.   
592. bodyNode.insertBefore(tableObj);  
593.   
594. // --＞  
595.   
596. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
597.   
598. 上面的代码又一次演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点，然后混合使用insertBefore将这些节点进行连接形成一个Table，最后通过语句bodyNode.  
599. insertBefore (tableObj)将Table装载进文档中。可以看到，如果省略掉第2个参数brotherObj采用fatherObj.insertBefore(childObj)方式，那么一定是在要连入的父亲节点还没有孩子节点的情况下，这时，就和appendNode方法的功能完全一样了。点击这里运行这个实例。  
600.   
601.   
602. 使用removeNode方法  
603.   
604.   
605. removeNode方法的功能是删除一个节点，语法为node.removeNode（false）或者node.removeNode（true），返回值是被删除的节点。removeNode（false）表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。removeNode（true）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。来看看下面的例子：  
606.   
607. ＜HTML＞＜HEAD＞＜TITLE＞DOM Demo＜/TITLE＞＜/HEAD＞  
608.   
609. ＜BODY id=bodyNode＞This is the document body  
610.   
611. ＜P id=p1Node＞This is paragraph 1.＜/P＞  
612.   
613. ＜P id=p2Node＞This is paragraph 2.＜/P＞  
614.   
615. ＜P id=p3Node＞This is paragraph 3. ＜IMG id=imgNode  
616.   
617. src="myexam.gif"＞This text follows the image  
618.   
619. ＜TABLE id=tableNode＞  
620.   
621. ＜TBODY＞  
622.   
623. ＜TR＞  
624.   
625. ＜TD bgColor=yellow＞This is row 1, cell 1＜/TD＞  
626.   
627. ＜TD bgColor=orange＞This is row 1, cell 2＜/TD＞＜/TR＞  
628.   
629. ＜TR＞  
630.   
631. ＜TD bgColor=red＞This is row 2, cell 1＜/TD＞  
632.   
633. ＜TD bgColor=magenta＞This is row 2, cell 2＜/TD＞＜/TR＞  
634.   
635. ＜TR＞  
636.   
637. ＜TD bgColor=lightgreen＞This is row 3, cell 1＜/TD＞  
638.   
639. ＜TD bgColor=beige＞This is row 3, cell 2＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/P＞  
640.   
641. ＜P id=p4Node＞This is paragraph 4.＜/P＞  
642.   
643. ＜SCRIPT language=JavaScript＞  
644.   
645. ＜!--  
646.   
647. var msg = "";  
648.   
649. function printChildren() {  
650.   
651. childCount = bodyNode.childNodes.length;  
652.   
653. msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;  
654.   
655. for(var i = 0; i ＜ childCount; i++) {  
656.   
657. msg += "bodyNode.childNodes[i].nodeName = " +  
658. bodyNode.childNodes[i].nodeName + "\n";  
659.   
660. }  
661.   
662. alert(msg);  
663.