论坛首页 → Web前端技术论坛 →

使用DOM技术操纵文档

浏览 2723 次
锁定老帖子 主题：使用DOM技术操纵文档
该帖已经被评为隐藏帖
作者 正文
  • AvengerBevis
  • 等级: 初级会员
  • 性别:
  • 文章: 46
  • 积分: 66
  • 来自: Beijing
   发表时间：2007-04-10  
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.   
返回顶楼
         
  • AvengerBevis
  • 等级: 初级会员
  • 性别:
  • 文章: 46
  • 积分: 66
  • 来自: Beijing
   发表时间：2007-04-10  
java 代码
 
  1. }  
  2.   
  3. msg="页面初始状态" + "\n\n"  
  4.   
  5. printChildren();  
  6.   
  7. msg="对页面内容进行修改后" + "\n\n"  
  8.   
  9. msg += "Deleting Paragraph 3\n";  
  10.   
  11. var deletedNode = p3Node.removeNode(false);  
  12.   
  13. msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n";  
  14.   
  15. msg += "deletedNode.childNodes.length = " +  
  16. deletedNode.childNodes.length + "\n";  
  17.   
  18. printChildren();  
  19.   
  20. // --＞  
  21.   
  22. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
  23.   
  24. 上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后仅仅删除p3Node。删除p3Node前，bodyNode有6个孩子节点，p3Node有4个孩子节点。删除p3Node后，节点p3Node的4个孩子节点提升为bodyNode的孩子节点，这样bodyNode就有了9个节点。p3Node被删除后返回值为deletedNode，它的nodeName属性值为P，孩子节点数为0，也就是说，它成为一个孤立节点。点击这里运行这个实例。  
  25.   
  26.   
  27. 现在我们将上述代码中的deletedNode = p3Node.removeNode(false)修改为deletedNode =  
  28. p3Node.removeNode(true)，你会看到，删除p3Node后，bodyNode的孩子节点数变为5。点击这里看看实际效果。  
  29.   
  30. JavaScript高级应用：使用DOM技术操纵文档  
  31. 使用replaceNode方法  
  32.   
  33.   
  34. replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点，语法为oldNode.replaceNode(newNode)，返回值是被替换的节点。来看看下面的例子：  
  35.   
  36.   
  37. ＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞  
  38.   
  39. ＜BODY ID="bodyNode"＞  
  40.   
  41. This is the document body  
  42.   
  43. ＜P ID = "p1Node"＞This is paragraph 1.＜/P＞  
  44.   
  45. ＜P ID = "p2Node"＞This is paragraph 2.＜/P＞  
  46.   
  47. ＜P ID = "p3Node"＞This is paragraph 3.  
  48.   
  49. ＜IMG ID = "imgNode" SRC="myexam.gif"＞This text follows the image  
  50.   
  51. ＜TABLE ID="tableNode"＞  
  52.   
  53. ＜TR＞＜TD BGCOLOR=yellow＞This is row 1, cell 1＜/TD＞＜TD  
  54. BGCOLOR=orange＞This is row 1, cell 2＜/TD＞＜/TR＞  
  55.   
  56. ＜TR＞＜TD BGCOLOR=red＞This is row 2, cell 1＜/TD＞＜TD BGCOLOR=magenta＞This  
  57. is row 2, cell 2＜/TD＞＜/TR＞  
  58.   
  59. ＜TR＞＜TD BGCOLOR=lightgreen＞This is row 3, cell 1＜/TD＞＜TD  
  60. BGCOLOR=beige＞This is row 3, cell 2＜/TD＞＜/TR＞  
  61.   
  62. ＜/TABLE＞  
  63.   
  64. ＜/P＞  
  65.   
  66. ＜P ID = "p4Node"＞This is paragraph 4.＜/P＞  
  67.   
  68. ＜SCRIPT LANGUAGE="JavaScript"＞  
  69.   
  70. ＜!--  
  71.   
  72. var msg = "";  
  73.   
  74. function printChildren() {  
  75.   
  76. childCount = bodyNode.childNodes.length;  
  77.   
  78. msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;  
  79.   
  80. for(var i = 0; i ＜ childCount; i++) {  
  81.   
  82. msg += "bodyNode.childNodes[i].nodeName = " +  
  83. bodyNode.childNodes[i].nodeName + "\n";  
  84.   
  85. }  
  86.   
  87. alert(msg);  
  88.   
  89. }  
  90.   
  91. msg="页面初始状态" + "\n\n"  
  92.   
  93. printChildren();  
  94.   
  95. msg="对页面内容进行修改后" + "\n\n"  
  96.   
  97. msg += "Replacing Paragraph 3\n";  
  98.   
  99. var b = document.createTextNode("New Body Page");  
  100.   
  101. var replacedNode = p3Node.replaceNode(b);  
  102.   
  103. msg += "replacedNode.nodeName = " + replacedNode.nodeName + "\n";  
  104.   
  105. msg += "replacedNode.childNodes.length = " +  
  106. replacedNode.childNodes.length + "\n";  
  107.   
  108. msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";  
  109.   
  110. printChildren();  
  111.   
  112. // --＞  
  113.   
  114. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
  115.   
  116. 上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后用新创建的文本项节点替换p3Node。替换后，bodyNode的孩子节点数目没有变，原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node，它仍包含原来的4个孩子节点。点击这里运行这个实例。  
  117.   
  118.   
  119. replaceNode方法的另一个功能是删除节点及其下属节点，就象前面介绍的removeNode（true）一样。这时，我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在，我们将上述代码中的b  
  120. = document.createTextNode("New Body Page")修改为b =  
  121. p2Node，你会看到，p3Node及其下属节点被删除了，没有替换节点生成，bodyNode的孩子节点数变为5。点击这里看看实际效果。  
  122.   
  123.   
  124. 如果replaceNode方法的参数为空，也就是执行replaceNode（），那么将导致浏览器脚本运行错误。  
  125.   
  126. JavaScript高级应用：使用DOM技术操纵文档  
  127. 使用swapNode方法  
  128.   
  129.   
  130. swapNode方法的功能是交换2个节点（包括其下属节点）在文档Tree中的位置，语法为firstNode.swapNode(secondNode)，返回值是节点firstNode。来看看下面的例子：  
  131.   
  132.   
  133. ＜HTML＞＜HEAD＞＜TITLE＞DOM Demo＜/TITLE＞＜/HEAD＞  
  134.   
  135. ＜BODY id=bodyNode＞This is the document body  
  136.   
  137. ＜P id=p1Node＞This is paragraph 1.＜/P＞  
  138.   
  139. ＜P id=p2Node＞This is paragraph 2.＜/P＞  
  140.   
  141. ＜P id=p3Node＞This is paragraph 3. ＜IMG id=imgNode  
  142.   
  143. src="myexam.gif"＞This text follows the image  
  144.   
  145. ＜TABLE id=tableNode＞  
  146.   
  147. ＜TBODY＞  
  148.   
  149. ＜TR＞  
  150.   
  151. ＜TD bgColor=yellow＞This is row 1, cell 1＜/TD＞  
  152.   
  153. ＜TD bgColor=orange＞This is row 1, cell 2＜/TD＞＜/TR＞  
  154.   
  155. ＜TR＞  
  156.   
  157. ＜TD bgColor=red＞This is row 2, cell 1＜/TD＞  
  158.   
  159. ＜TD bgColor=magenta＞This is row 2, cell 2＜/TD＞＜/TR＞  
  160.   
  161. ＜TR＞  
  162.   
  163. ＜TD bgColor=lightgreen＞This is row 3, cell 1＜/TD＞  
  164.   
  165. ＜TD bgColor=beige＞This is row 3, cell 2＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/P＞  
  166.   
  167. ＜P id=p4Node＞This is paragraph 4.＜/P＞  
  168.   
  169. ＜SCRIPT language=JavaScript＞  
  170.   
  171. ＜!--  
  172.   
  173. var msg = "";  
  174.   
  175. function printChildren() {  
  176.   
  177. childCount = bodyNode.childNodes.length;  
  178.   
  179. msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;  
  180.   
  181. for(var i = 0; i ＜ childCount; i++) {  
  182.   
  183. msg += "bodyNode.childNodes[i].nodeName = " +  
  184. bodyNode.childNodes[i].nodeName + "\n";  
  185.   
  186. }  
  187.   
  188. alert(msg);  
  189.   
  190. }  
  191.   
  192. msg="页面初始状态" + "\n\n"  
  193.   
  194. printChildren();  
  195.   
  196. msg="对页面内容进行修改后" + "\n\n"  
  197.   
  198. msg += "Swapping Paragraph 3 with Paragraph 2\n";  
  199.   
  200. var b = p2Node;  
  201.   
  202. var swappedNode = p3Node.swapNode(b);  
  203.   
  204. msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n";  
  205.   
  206. msg += "swappedNode.childNodes.length = " +  
  207. swappedNode.childNodes.length + "\n";  
  208.   
  209. msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";  
  210.   
  211. printChildren();  
  212.   
  213. // --＞  
  214.   
  215. ＜/SCRIPT＞＜/BODY＞＜/HTML＞  
  216.   
  217. 上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后交换p3Node和p2Node的位置。交换后，bodyNode的孩子节点数目没有变，变量swappedNode表示p3Node，它仍包含原来的4个孩子节点。点击这里运行这个实例。  
  218.   
  219.   
  220. swapNode方法的另一个功能是替换节点及其下属节点，就象前面介绍的replaceNode方法一样。这时，我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在，我们将上述代码中的b  
  221. = p2Node修改为b = document.createTextNode("This is a swapped in 
  222. text")，你会看到，p3Node及其下属节点被新创建的文本项节点所替换，原来的节点类型P变为了文本项节点类型#text。点击这里看看实际效果。  
  223.   
  224.   
  225. 结 语  
  226.   
  227.   
  228. 以上我们详细讲解了JavaScript语言中在层次关系上操纵对象的各种DOM属性和方法原理，并且配以例程演示了实际的运行效果。我相信你已经完全掌握了如何使用这些方法，并会逐渐加深对DOM技术的喜爱。因为，DOM技术确实简化了文档对象的访问方式，为开发人员在对象层次上操纵文档提供了最便捷的手段。  
返回顶楼
          回帖地址
0 请登录后投票
  • cozone_柯中
  • 等级: 五星会员
  • 性别:
  • 文章: 225
  • 积分: 464
  • 来自: 湖北武汉北京
   发表时间：2007-04-10  
麻烦你给个demo吧,这么大篇幅的代码,看的头疼
返回顶楼
          回帖地址
0 请登录后投票
  • knight
  • 等级: 二星会员
  • 文章: 21
  • 积分: 150
   发表时间：2007-04-10  
http://knight.iteye.com/admin/show/44413
这里就有手册可以下载了。。。
返回顶楼
          回帖地址
0 请登录后投票
  • hexiaodong
  • 等级: 五星会员
  • 性别:
  • 文章: 295
  • 积分: 733
   发表时间：2007-04-10  
qmei 写道
利用XMLDOM技术做的开源的web打印控件 www.fcsoft.com.cn/ePrint.htm


你们的打印控件（ocx）还可以，不过不喜欢其中的htc控件。所以单据打印和报表打印，我是自己写的js控件
返回顶楼
          回帖地址
0 请登录后投票
  • xms_999
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 上海
   发表时间：2007-07-18  
谢谢分享
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics