javascript输出页面节点层级效果
本章节分享一段代码实例，它实现了能够输出html页面节点层级关系效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
var ResultStr = "";
function ListNode(node,level) {
PrintInfo(node, level);
level++;
var nodes = node.childNodes;
for (var index = 0; index < nodes.length; index++) {
if (nodes[index].hasChildNodes()) {
ListNode(nodes[index], level); //递归
}
else {
PrintInfo(nodes[index], level);
}
}
}
function getSpace(level) {
var s = "";
for (var index = 0; index < level; index++) {
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);
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
getDocAllInfo()
}
}
</script>
</head>
<body>
<input type="button" id="bt" value="查看效果"/>
<div id="divDemo">div内容</div>
<table>
<tr>
<td>前端教程网一</td>
<td>前端教程网二</td>
</tr>
<tr>
<td>前端教程网三</td>
<td>前端教程网四</td>
</tr>
</table>
<input type="text" />
<span>这是span元素</span>
<!--蚂蚁注释-->
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var ResultStr = ""，声明一个字符串并赋值为空，用来存储输出节点的层级内容。
（2）.function ListNode(node,level) {}，此函数实现了节点层级以字符串表示的功能,第一个参数是元素节点，第二个参数是层级，最外层docment层级是0，依次类推。
（3）.PrintInfo(node, level)，输出层级结构。
（4）.level++，层级加1。
（5）.var nodes = node.childNodes，获取node节点的所有子节点。
（6）.for (var index = 0; index < nodes.length; index++) {}，遍历每一个节点。
（7）.if (nodes[index].hasChildNodes()) {
ListNode(nodes[index], level);
}，如果当前节点节点具有子节点，那么再进行递归操作。
（8）.else {
PrintInfo(nodes[index], level);
}，否则直接将层级结构连接成字符串存储起来。
（9）.function getSpace(level) {
var s = "";
for (var index = 0; index < level; index++) {
s+="!----"
}
return s;
}，此函数可以在结构钱添加-作为层级层次。
（10）.function PrintInfo(node, level) {
ResultStr += getSpace(level) + "Name:" + node.nodeName +
"...Type:" + node.nodeType + "...Value:" + node.nodeValue + "<br />";
}，将层级结构连接成字符串。
二.相关阅读:
（1）.childNodes可以参阅childNodes一章节。
（2）.hasChildNodes()可以参阅javascript hasChildNodes()一章节。