利用原生JS自動生成文章標題樹的實例
更新時間：2016年08月22日 11:15:58 投稿：daisy
網上關于生成文章標題樹的示例很多，這篇文章介紹的是利用原生JS實現自動生成文章標題樹，實現過程很簡單，有需要的可以參考借鑒。
實現原理很簡單，就是循環(huán)文章模塊，并抽取其中的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;
// 創(chuàng)建文檔片段，來包裹自動生成的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;
// 創(chuàng)建文檔片段，來包裹自動生成的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類型系統(tǒng)_正則表達式RegExp類型詳解
下面小編就為大家?guī)硪黄猨avascript類型系統(tǒng)_正則表達式RegExp類型詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
由于uniapp暫無釘釘授權登錄所以本文將釘釘掃碼登錄作為網頁嵌入uniapp，最終實現釘釘掃碼登錄app，本文通過實例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧2021-12-12
這篇文章介紹了Ajax實現搜索框提示功能的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了ES6數組與對象的解構賦值,結合實例形式詳細分析了ES6中數組與對象的解構賦值原理、用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了微信小程序修改數組長度的問題的解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了js實現簡單div拖拽功能的方法,實例分析了javascript針對div層拖拽的實現技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了javascript表單控件實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JS使用Expires?max-age判斷緩存過期的瀏覽器實例
這篇文章主要為大家介紹了JS使用Expires?max-age判斷緩存過期的瀏覽器實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要為大家詳細介紹了小程序實現多列選擇器的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了js實現的捐贈管理完整實例,包括了html頁面、js腳本及css樣式的完整實現代碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01