利用原生JS自動生成文章標題樹的實例

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 利用原生JS自動生成文章標題樹的實例

利用原生JS自動生成文章標題樹的實例

編輯：關於JavaScript

實現原理很簡單，就是循環文章模塊，並抽取其中的h2、h3標簽，將其中的內容賦予給新建的title樹。

代碼如下：

HTML代碼：

<div class="contextBox">
 <div id="article">
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <p>hello hello hello hello hello hello hello hello hello hello hello hello</p>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <p>hello hello hello hello hello hello hello hello hello hello hello</p>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <p>world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world </p>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
 </div>
 <div class="articleMenu-box" id="articleMenu_box">
  <span class="articleMenu-open" id="articleMenu_open"></span>
  <ul class="articleMenu hello" id="articleMenu">
   <span class="articleMenu-close" id="articleMenu_close"></span>
  </ul>
 </div>
</div>

CSS代碼：

* {
 margin: 0;
 padding: 0;
 border: 0;
}
body {
 font: 16px/1.5;
}
ul li, ol li {
 list-style: none;
}
.contextBox {
 position: relative;
 width: 960px;
 margin: 0 auto;
}
#article {
 margin-left: 200px;
 border: 1px #eee solid;
 padding: 15px;
}
.articleMenu a {
 text-decoration: none;
 color: #333;
}
.articleMenu a:hover {
 color: #f85455;
}
.articleMenu-box {
 width: 170px;
 position: absolute;
 left: 10px;
 top: 10px;
}
.articleMenu {
 padding: 10px;
 border: 1px solid #ccc;
 box-shadow: 2px 2px 2px #eee;
}
.titleH2, .titleH3 {
 line-height: 1.5em;
}
.titleH2 {
 font-weight: bold;
}
.titleH3 {
 margin-left: 20px;
}
.articleMenu .articleMenu-close, .articleMenu-open {
 display: inline-block;
 position: absolute;
 right: 0;
 top: 0;
 height: 44px;
 width: 44px;
 cursor: pointer;
}
.articleMenu-open {
 background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_open.png") no-repeat 50% 50%;
 display: none;
}
.articleMenu .articleMenu-close {
 background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") no-repeat 50% 50%;
}

JavaScript代碼：

var article = document.getElementById("article");
var articleHgroupMenu = document.getElementById("articleMenu");

// 關閉和展開文檔樹
var articleMenu_open = document.getElementById("articleMenu_open");
var articleMenu_close = document.getElementById("articleMenu_close");
articleMenu_close.onclick = function() {
 articleHgroupMenu.style.display = "none";
 articleMenu_open.style.display = "block";
};
articleMenu_open.onclick = function() {
 articleHgroupMenu.style.display = "block";
 articleMenu_open.style.display = "none";
};

//
titleHgroup(article, articleHgroupMenu, "titleH2", "titleH3");

// 獲得obj下的直接子元素中為標題h2~h3的標題元素
// 參數說明：hgroupParent為包含h2和h3的直接父元素；MenuList為承載新建文章列表的ul元素；
// h2ClassName、h3ClassName分別為新建文章列表中對應h2、h3的li自列表的Class屬性；
function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {
 var hgroup = hgroupParent.children;

 // 創建文檔片段，來包裹自動生成的h2、h3對應生成的li列表
 var fragment = document.createDocumentFragment();
 for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {

  // 為對應類型的標題生成li列表
  // 參數說明：hType為標題的類型如h1~h6；className為標題對應的li列表的class屬性值；
  function titleToList(hType, className) {
   var li = document.createElement("li");
   li.className = className;

   // 為li標簽內部添加a標簽，用錨點進行定位；
   hgroup[i].id= hType + i;
   li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
   fragment.appendChild(li);
  }

  // 當遍歷中標題元素為h2時，調用titleToList(hType, className)新增對應的li列表；
  if(hgroup[i].nodeName.toLowerCase() == "h2") {
   titleToList("h2", h2ClassName);
  }

  // 當遍歷中標題元素為h3時，調用titleToList(hType, className)新增對應的li列表；
  if(hgroup[i].nodeName.toLowerCase() == "h3") {
   titleToList("h3", h3ClassName);
  }
 }
 // 將承載好對應li元素集合的文檔片段fragment添加到DOM(即在DOM中包裹li列表的父元素)中去；
 MenuList.appendChild(fragment);
}

完整實例代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>原生JS實現自動生成文章標題樹</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
 border: 0;
}
body {
 font: 16px/1.5;
}
ul li, ol li {
 list-style: none;
}
.contextBox {
 position: relative;
 width: 960px;
 margin: 0 auto;
}
#article {
 margin-left: 200px;
 border: 1px #eee solid;
 padding: 15px;
}
.articleMenu a {
 text-decoration: none;
 color: #333;
}
.articleMenu a:hover {
 color: #f85455;
}
.articleMenu-box {
 width: 170px;
 position: absolute;
 left: 10px;
 top: 10px;
}
.articleMenu {
 padding: 10px;
 border: 1px solid #ccc;
 box-shadow: 2px 2px 2px #eee;
}
.titleH2, .titleH3 {
 line-height: 1.5em;
}
.titleH2 {
 font-weight: bold;
}
.titleH3 {
 margin-left: 20px;
}
.articleMenu .articleMenu-close, .articleMenu-open {
 display: inline-block;
 position: absolute;
 right: 0;
 top: 0;
 height: 44px;
 width: 44px;
 cursor: pointer;
}
.articleMenu-open {
 background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_open.png") no-repeat 50% 50%;
 display: none;
}
.articleMenu .articleMenu-close {
 background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") no-repeat 50% 50%;
}
</style>

</head>

<body>
<div class="contextBox">
 <div id="article">
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <p>hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /><br /> hello<br /> hell<br />o hel<br />lo hell<br />o he<br />llo hello</p>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <p>hello hello hello hello hello hello hello hello hello hello hello</p>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <p>world w<br />orld <br />world world wo<br />rld world wo<br />rld world world wor<br />ld world world <br />world <br />worl<br />d world<br /> w<br />orld <br />world wo<br />rld wor<br />ld world wor<br />ld world worl<br />d w<br />or<br />ld<br /> <br />world <br />world <br />world<br /> <br />wo<br />rld wo<br />rld w<br />orld w<br />orld </p>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h3>三級標題</h3>
 </div>
 <div class="articleMenu-box" id="articleMenu_box">
  <span class="articleMenu-open" id="articleMenu_open"></span>
  <ul class="articleMenu hello" id="articleMenu">
   <span class="articleMenu-close" id="articleMenu_close"></span>
  </ul>
 </div>
</div>
<script type="text/javascript">
var article = document.getElementById("article");
var articleHgroupMenu = document.getElementById("articleMenu");

// 關閉和展開文檔樹
var articleMenu_open = document.getElementById("articleMenu_open");
var articleMenu_close = document.getElementById("articleMenu_close");
articleMenu_close.onclick = function() {
 articleHgroupMenu.style.display = "none";
 articleMenu_open.style.display = "block";
};
articleMenu_open.onclick = function() {
 articleHgroupMenu.style.display = "block";
 articleMenu_open.style.display = "none";
};

//
titleHgroup(article, articleHgroupMenu, "titleH2", "titleH3");

// 獲得obj下的直接子元素中為標題h2~h3的標題元素
// 參數說明：hgroupParent為包含h2和h3的直接父元素；MenuList為承載新建文章列表的ul元素；
// h2ClassName、h3ClassName分別為新建文章列表中對應h2、h3的li自列表的Class屬性；
function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {
 var hgroup = hgroupParent.children;

 // 創建文檔片段，來包裹自動生成的h2、h3對應生成的li列表
 var fragment = document.createDocumentFragment();
 for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {

  // 為對應類型的標題生成li列表
  // 參數說明：hType為標題的類型如h1~h6；className為標題對應的li列表的class屬性值；
  function titleToList(hType, className) {
   var li = document.createElement("li");
   li.className = className;

   // 為li標簽內部添加a標簽，用錨點進行定位；
   hgroup[i].id= hType + i;
   li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
   fragment.appendChild(li);
  }

  // 當遍歷中標題元素為h2時，調用titleToList(hType, className)新增對應的li列表；
  if(hgroup[i].nodeName.toLowerCase() == "h2") {
   titleToList("h2", h2ClassName);
  }

  // 當遍歷中標題元素為h3時，調用titleToList(hType, className)新增對應的li列表；
  if(hgroup[i].nodeName.toLowerCase() == "h3") {
   titleToList("h3", h3ClassName);
  }
 }
 // 將承載好對應li元素集合的文檔片段fragment添加到DOM(即在DOM中包裹li列表的父元素)中去；
 MenuList.appendChild(fragment);
}
</script>
</body>
</html>

總結

以上就是利用原生JS自動生成文章標題樹的全部內容，希望本文的內容對大家能有所幫助，如果有疑問可以留言討論。

上一頁:基於JavaScript實現添加到購物車效果附源碼下載
下一頁:JavaScript代碼裡的判斷小結

關於JavaScript

js中符號轉意問題示例探討: 復制代碼代碼如下: function URLencode(sStr) { return escap
jQuery實現點擊查看大圖並以彈框的形式居中: jQuery實現點擊查看大圖並以彈框的形式居中，實現的關鍵代碼如下所示：*{margin:0;pad
JS數組的常見用法實例: 本文實例講述了JS數組的常見用法。分享給大家供大家參考。具體方法如下：復制代碼代碼如下:<!

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

小編推薦

javascript實現無縫上下滾動特效 Bootstrap中的Panel和Table全面解析 js中split和replace的用法實例教程 IE6/7/8/9不支持exec的簡寫方式 Bootstrap+jfinal退出系統彈出確認框的實現方法深入理解JavaScript的閉包 javascript中Number的方法小結 js 自帶的sort() 方法全面了解 js的.innerHTML = IE9下顯示有錯誤的解決方法 AngularJS入門教程之學習環境搭建

DIV CSS 佈局教程網

相關文章