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()一章节。