Javascript递归打印Document层次关系实例分析

这篇文章主要介绍了Javascript递归打印Document层次关系的方法,实例分析了javascript中Document的层次关系,需要的朋友可以参考下

本文实例讲述了Javascript递归打印Document层次关系的方法。分享给大家供大家参考。具体如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>递归显示节点层次关系</title> 
5. <script type="text/javascript"> 
6. var ResultStr = ""; 
7. function ListNode(node,level) { 
8. PrintInfo(node, level); 
9. level++; 
10. var nodes = node.childNodes; 
11. for (var i = 0; i < nodes.length; i++) { 
12. if (nodes[i].hasChildNodes()) { 
13. ListNode(nodes[i], level); //递归 
14. } 
15. else { 
16. PrintInfo(nodes[i], level); 
17. } 
18. } 
19. } 
20. function getSpace(level) { 
21. var s = ""; 
22. for (var i = 0; i < level; i++) { 
23. s+="!----" 
24. } 
25. return s; 
26. } 
27. function PrintInfo(node, level) { 
28. ResultStr += getSpace(level) + "Name:" + node.nodeName +  
29. "...Type:" + node.nodeType + "...Value:" + node.nodeValue + "<br />"; 
30. } 
31. function getDocAllInfo() { 
32. ResultStr = ""; 
33. ListNode(document, 0); 
34. document.write(ResultStr); 
35. } 
36. </script> 
37. </head> 
38. <body> 
39. <input type="button" value="测试" onclick="getDocAllInfo()" /> 
40. <div id="divDemo">div内容</div> 
41. <table> 
42. <tr> 
43. <td>单元格1</td> 
44. <td>单元格2</td> 
45. </tr> 
46. <tr> 
47. <td>单元格3</td> 
48. <td>单元格4</td> 
49. </tr> 
50. </table> 
51. <input type="text" /> 
52. <span>我是SPAN</span> 
53. <!--我是注释--> 
54. </body> 
55. </html> 

希望本文所述对大家的javascript程序设计有所帮助。