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>递归显示节点层次关系</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程序设计有所帮助。
相关文章
本文主要分享了js模糊查询的实现代码，没有接触到后台数据的知识，只是查询当前表格中每一行所包含的关键字。具有一定的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了JavaScript实现时间倒计时跳转(推荐)的相关资料,涉及到settimeout和setinterval方法的介绍，非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
一个div拖动互换位置的demo，还有很大优化的空间，利用dom元素的dragstart/ondragover/ondrop事件完成，感兴趣的可以了解一下2021-06-06
picChange图片切换特效的封装函数，能够根据图片html代码自动生成右下角的数字导航按钮。2010-05-05
本文主要介绍了JavaScript尾递归的实现及应用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了js+css打字效果的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
本文主要介绍了浅谈JavaScript的几种继承实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
有了语音识别,交流就会变得很简单,下面这篇文章主要给大家介绍了关于如何在uni-app使用微软的文字转语音服务的相关资料,需要的朋友可以参考下2022-06-06
在这篇文章中，主要将向大家展示如何使用 HTML、CSS 和 JavaScript代码制作模拟时钟，文中的示例代码讲解详细，感兴趣的可以了解一下2022-08-08
这篇文章主要介绍了webpack构建下换肤功能的思路详解,需要的朋友可以参考下2017-11-11
最新评论