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


Posted in Javascript onMay 15, 2015

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>递归显示节点层次关系</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内容</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程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
原生js实现选项卡功能
Mar 08 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
Javascript节点关系实例分析
May 15 #Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 #Javascript
Javascript进制转换实例分析
May 14 #Javascript
Javascript中For In语句用法实例
May 14 #Javascript
Javascript中With语句用法实例
May 14 #Javascript
javascript用函数实现对象的方法
May 14 #Javascript
You might like
isset和empty的区别
2007/01/15 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP xpath()函数讲解
2019/02/11 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
详解http访问解析流程原理
2017/10/18 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python中一行和多行import模块问题
2018/04/01 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
文秘大学生求职信
2014/02/25 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
餐饮投资计划书
2014/04/25 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
唐山大地震的观后感
2015/06/05 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫