Javascript遞歸打印Document層次關系實例分析

更新時間：2015年05月15日 09:23:55 作者：永遠愛好寫程序

這篇文章主要介紹了Javascript遞歸打印Document層次關系的方法,實例分析了javascript中Document的層次關系,需要的朋友可以參考下

本文實例講述了Javascript遞歸打印Document層次關系的方法。分享給大家供大家參考。具體如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遞歸顯示節(jié)點層次關系</title>
<script type="text/javascript">
var ResultStr = "";
function ListNode(node,level) {
 PrintInfo(node, level);
 level++;
 var nodes = node.childNodes;
 for (var i = 0; i < nodes.length; i++) {
  if (nodes[i].hasChildNodes()) {
   ListNode(nodes[i], level); //遞歸
  }
  else {
   PrintInfo(nodes[i], level);
  }
 }
}
function getSpace(level) {
 var s = "";
 for (var i = 0; i < level; i++) {
  s+="!----"
 }
 return s;
}
function PrintInfo(node, level) {
 ResultStr += getSpace(level) + "Name:" + node.nodeName + 
 "...Type:" + node.nodeType + "...Value:" + node.nodeValue + "<br />";
}
function getDocAllInfo() {
 ResultStr = "";
 ListNode(document, 0);
 document.write(ResultStr);
}
</script>
</head>
<body>
<input type="button" value="測試" onclick="getDocAllInfo()" />
<div id="divDemo">div內(nèi)容</div>
<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>
<input type="text" />
<span>我是SPAN</span>
<!--我是注釋-->
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

js模糊查詢實例分享
本文主要分享了js模糊查詢的實現(xiàn)代碼，沒有接觸到后臺數(shù)據(jù)的知識，只是查詢當前表格中每一行所包含的關鍵字。具有一定的參考價值，需要的朋友一起來看下吧
2016-12-12
JavaScript實現(xiàn)時間倒計時跳轉(zhuǎn)(推薦)
這篇文章主要介紹了JavaScript實現(xiàn)時間倒計時跳轉(zhuǎn)(推薦)的相關資料,涉及到settimeout和setinterval方法的介紹，非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
javascript拖曳互換div的位置實現(xiàn)示例
一個div拖動互換位置的demo，還有很大優(yōu)化的空間，利用dom元素的dragstart/ondragover/ondrop事件完成，感興趣的可以了解一下
2021-06-06
picChange 圖片切換特效的函數(shù)代碼
picChange圖片切換特效的封裝函數(shù)，能夠根據(jù)圖片html代碼自動生成右下角的數(shù)字導航按鈕。
2010-05-05
JavaScript尾遞歸的實現(xiàn)及應用場景
本文主要介紹了JavaScript尾遞歸的實現(xiàn)及應用場景，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
js+css實現(xiàn)打字效果
這篇文章主要為大家詳細介紹了js+css打字效果的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-04-04
淺談JavaScript的幾種繼承實現(xiàn)方式
本文主要介紹了淺談JavaScript的幾種繼承實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
如何在uni-app使用微軟的文字轉(zhuǎn)語音服務
有了語音識別,交流就會變得很簡單,下面這篇文章主要給大家介紹了關于如何在uni-app使用微軟的文字轉(zhuǎn)語音服務的相關資料,需要的朋友可以參考下
2022-06-06
HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果
在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘，文中的示例代碼講解詳細，感興趣的可以了解一下
2022-08-08
webpack構建換膚功能的思路詳解
這篇文章主要介紹了webpack構建下?lián)Q膚功能的思路詳解,需要的朋友可以參考下
2017-11-11