利用原生JS自動(dòng)生成文章標(biāo)題樹的實(shí)例
更新時(shí)間：2016年08月22日 11:15:58 投稿：daisy
網(wǎng)上關(guān)于生成文章標(biāo)題樹的示例很多，這篇文章介紹的是利用原生JS實(shí)現(xiàn)自動(dòng)生成文章標(biāo)題樹，實(shí)現(xiàn)過程很簡單，有需要的可以參考借鑒。
實(shí)現(xiàn)原理很簡單，就是循環(huán)文章模塊，并抽取其中的h2、h3標(biāo)簽，將其中的內(nèi)容賦予給新建的title樹。
代碼如下：
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)閉和展開文檔樹
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)建文檔片段，來包裹自動(dò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)簽，用錨點(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)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當(dāng)遍歷中標(biāo)題元素為h3時(shí)，調(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);
}
完整實(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)題樹</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)閉和展開文檔樹
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)建文檔片段，來包裹自動(dò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)簽，用錨點(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)新增對應(yīng)的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當(dāng)遍歷中標(biāo)題元素為h3時(shí)，調(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自動(dòng)生成文章標(biāo)題樹的全部內(nèi)容，希望本文的內(nèi)容對大家能有所幫助，如果有疑問可以留言討論。
您可能感興趣的文章:
- 一個(gè)簡單的js樹形菜單
- JS無限極樹形菜單,json格式、數(shù)組格式通用示例
- javascript 樹形導(dǎo)航菜單實(shí)例代碼
- json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
- 用JS做的簡單的可折疊的兩級(jí)樹形菜單
- js 通過cookie實(shí)現(xiàn)刷新不變化樹形菜單
- JS+CSS實(shí)現(xiàn)TreeMenu二級(jí)樹形菜單完整實(shí)例
- ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- JS+CSS簡單樹形菜單實(shí)現(xiàn)方法
相關(guān)文章
javascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)_正則表達(dá)式RegExp類型詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
由于uniapp暫無釘釘授權(quán)登錄所以本文將釘釘掃碼登錄作為網(wǎng)頁嵌入uniapp，最終實(shí)現(xiàn)釘釘掃碼登錄app，本文通過實(shí)例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧2021-12-12
這篇文章介紹了Ajax實(shí)現(xiàn)搜索框提示功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了ES6數(shù)組與對象的解構(gòu)賦值,結(jié)合實(shí)例形式詳細(xì)分析了ES6中數(shù)組與對象的解構(gòu)賦值原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
這篇文章主要介紹了微信小程序修改數(shù)組長度的問題的解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
js實(shí)現(xiàn)簡單div拖拽功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡單div拖拽功能的方法,實(shí)例分析了javascript針對div層拖拽的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了javascript表單控件實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JS使用Expires?max-age判斷緩存過期的瀏覽器實(shí)例
這篇文章主要為大家介紹了JS使用Expires?max-age判斷緩存過期的瀏覽器實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多列選擇器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
js實(shí)現(xiàn)的捐贈(zèng)管理完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的捐贈(zèng)管理完整實(shí)例,包括了html頁面、js腳本及css樣式的完整實(shí)現(xiàn)代碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01