快捷導(dǎo)航

Javascript遞歸打印Document層次關(guān)系實(shí)例分析

更新時(shí)間：2015年05月15日 09:23:55 作者：永遠(yuǎn)愛好寫程序

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>遞歸顯示節(jié)點(diǎn)層次關(guān)系</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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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