利用原生JS自動生成文章標(biāo)題樹的實例
更新時間：2016年08月22日 11:15:58 投稿：daisy
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實現(xiàn)自動生成文章標(biāo)題樹，實現(xiàn)過程很簡單，有需要的可以參考借鑒。
實現(xiàn)原理很簡單，就是循環(huán)文章模塊，并抽取其中的h2、h3標(biāo)簽，將其中的內(nèi)容賦予給新建的title樹。
代碼如下：
HTML代碼：
<div class="contextBox"> <div id="article"> <h2>二級標(biāo)題</h2> <h3>三級標(biāo)題</h3> <p>hello hello hello hello hello hello hello hello hello hello hello hello</p> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <p>hello hello hello hello hello hello hello hello hello hello hello</p> <h2>二級標(biāo)題</h2> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</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>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <h2>二級標(biāo)題</h2> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <h2>二級標(biāo)題</h2> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</h3> <h2>二級標(biāo)題</h2> <h3>三級標(biāo)題</h3> <h3>三級標(biāo)題</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");
// 關(guān)閉和展開文檔樹
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下的直接子元素中為標(biāo)題h2~h3的標(biāo)題元素
// 參數(shù)說明：hgroupParent為包含h2和h3的直接父元素；MenuList為承載新建文章列表的ul元素；
// h2ClassName、h3ClassName分別為新建文章列表中對應(yīng)h2、h3的li自列表的Class屬性；
function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {
var hgroup = hgroupParent.children;
// 創(chuàng)建文檔片段，來包裹自動生成的h2、h3對應(yīng)生成的li列表
var fragment = document.createDocumentFragment();
for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {
// 為對應(yīng)類型的標(biāo)題生成li列表
// 參數(shù)說明：hType為標(biāo)題的類型如h1~h6；className為標(biāo)題對應(yīng)的li列表的class屬性值；
function titleToList(hType, className) {
var li = document.createElement("li");
li.className = className;
// 為li標(biāo)簽內(nèi)部添加a標(biāo)簽，用錨點進行定位；
hgroup[i].id= hType + i;
li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
fragment.appendChild(li);
}
// 當(dāng)遍歷中標(biāo)題元素為h2時，調(diào)用titleToList(hType, className)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當(dāng)遍歷中標(biāo)題元素為h3時，調(diào)用titleToList(hType, className)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h3") {
titleToList("h3", h3ClassName);
}
}
// 將承載好對應(yīng)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實現(xiàn)自動生成文章標(biāo)題樹</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>二級標(biāo)題</h2>
<h3>三級標(biāo)題</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>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<p>hello hello hello hello hello hello hello hello hello hello hello</p>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</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>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</h3>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h3>三級標(biāo)題</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");
// 關(guān)閉和展開文檔樹
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下的直接子元素中為標(biāo)題h2~h3的標(biāo)題元素
// 參數(shù)說明：hgroupParent為包含h2和h3的直接父元素；MenuList為承載新建文章列表的ul元素；
// h2ClassName、h3ClassName分別為新建文章列表中對應(yīng)h2、h3的li自列表的Class屬性；
function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) {
var hgroup = hgroupParent.children;
// 創(chuàng)建文檔片段，來包裹自動生成的h2、h3對應(yīng)生成的li列表
var fragment = document.createDocumentFragment();
for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) {
// 為對應(yīng)類型的標(biāo)題生成li列表
// 參數(shù)說明：hType為標(biāo)題的類型如h1~h6；className為標(biāo)題對應(yīng)的li列表的class屬性值；
function titleToList(hType, className) {
var li = document.createElement("li");
li.className = className;
// 為li標(biāo)簽內(nèi)部添加a標(biāo)簽，用錨點進行定位；
hgroup[i].id= hType + i;
li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
fragment.appendChild(li);
}
// 當(dāng)遍歷中標(biāo)題元素為h2時，調(diào)用titleToList(hType, className)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當(dāng)遍歷中標(biāo)題元素為h3時，調(diào)用titleToList(hType, className)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h3") {
titleToList("h3", h3ClassName);
}
}
// 將承載好對應(yīng)li元素集合的文檔片段fragment添加到DOM(即在DOM中包裹li列表的父元素)中去；
MenuList.appendChild(fragment);
}
</script>
</body>
</html>
總結(jié)
以上就是利用原生JS自動生成文章標(biāo)題樹的全部內(nèi)容，希望本文的內(nèi)容對大家能有所幫助，如果有疑問可以留言討論。
相關(guān)文章
offsetHeight在OnLoad中獲取為0的現(xiàn)象
需要獲取div的高度時，往往需要用到offsetHeight，有時會碰到offsetHeight獲取到為0的現(xiàn)象，感興趣的朋友可以參考下面的代碼片段2013-07-07
JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法
這篇文章主要介紹了JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法,結(jié)合實例形式分析了javascript常見的Date()日期時間獲取、轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
javascript去除字符串中所有標(biāo)點符號和提取純文本的正則
這篇文章主要介紹了javascript去除字符串中所有標(biāo)點符號和提取純文本的正則,需要的朋友可以參考下2014-06-06
JavaScript實現(xiàn)的簡單Tab點擊切換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的簡單Tab點擊切換功能,涉及JavaScript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
PHP abstract與interface之間的區(qū)別
本文是對PHP中abstract與interface之間的區(qū)別進行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
在IE下獲取object（ActiveX）的Param的代碼
在IE下，獲取Param的時候有個詭異現(xiàn)象（不知道算不算bug）。2009-09-09
request請求獲取參數(shù)的實現(xiàn)方法(post和get兩種方式)
下面小編就為大家?guī)硪黄猺equest請求獲取參數(shù)的實現(xiàn)方法(post和get兩種方式)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
Bootstrap CSS組件之按鈕組(btn-group)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕組(btn-group)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
學(xué)習(xí)Bootstrap滾動監(jiān)聽 附調(diào)用方法
這篇文章主要為大家全面解析Bootstrap中滾動監(jiān)聽的使用方法，感興趣的小伙伴們可以參考一下2016-07-07