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

回复

我来回复
  • 暂无回复内容