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 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
javascript数据类型验证方法
Dec 31 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
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
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python简单实现AES加密和解密
2019/03/28 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
矿泉水广告词
2014/03/20 职场文书
倡议书格式范文
2014/04/14 职场文书
教研活动主持词
2015/07/03 职场文书