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