javascript輸出頁面節點層級效果

admin發表於2017-04-08
JavaScript

本章節分享一段程式碼例項，它實現了能夠輸出html頁面節點層級關係效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章節。

相關文章