利用原生JS自動生成文章標題樹的實例
更新時間：2016年08月22日 11:15:58 投稿：daisy
網(wǎng)上關于生成文章標題樹的示例很多，這篇文章介紹的是利用原生JS實現(xiàn)自動生成文章標題樹，實現(xiàn)過程很簡單，有需要的可以參考借鑒。
實現(xiàn)原理很簡單，就是循環(huán)文章模塊，并抽取其中的h2、h3標簽，將其中的內(nèi)容賦予給新建的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的標題元素
// 參數(shù)說明：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列表
// 參數(shù)說明：hType為標題的類型如h1~h6；className為標題對應的li列表的class屬性值；
function titleToList(hType, className) {
var li = document.createElement("li");
li.className = className;
// 為li標簽內(nèi)部添加a標簽，用錨點進行定位；
hgroup[i].id= hType + i;
li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
fragment.appendChild(li);
}
// 當遍歷中標題元素為h2時，調(diào)用titleToList(hType, className)新增對應的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當遍歷中標題元素為h3時，調(diào)用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實現(xiàn)自動生成文章標題樹</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的標題元素
// 參數(shù)說明：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列表
// 參數(shù)說明：hType為標題的類型如h1~h6；className為標題對應的li列表的class屬性值；
function titleToList(hType, className) {
var li = document.createElement("li");
li.className = className;
// 為li標簽內(nèi)部添加a標簽，用錨點進行定位；
hgroup[i].id= hType + i;
li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>");
fragment.appendChild(li);
}
// 當遍歷中標題元素為h2時，調(diào)用titleToList(hType, className)新增對應的li列表；
if(hgroup[i].nodeName.toLowerCase() == "h2") {
titleToList("h2", h2ClassName);
}
// 當遍歷中標題元素為h3時，調(diào)用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自動生成文章標題樹的全部內(nèi)容，希望本文的內(nèi)容對大家能有所幫助，如果有疑問可以留言討論。
相關文章
offsetHeight在OnLoad中獲取為0的現(xiàn)象
需要獲取div的高度時，往往需要用到offsetHeight，有時會碰到offsetHeight獲取到為0的現(xiàn)象，感興趣的朋友可以參考下面的代碼片段2013-07-07
JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法
這篇文章主要介紹了JS實現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時分秒的方法,結合實例形式分析了javascript常見的Date()日期時間獲取、轉(zhuǎn)換相關操作技巧,需要的朋友可以參考下2018-08-08
javascript去除字符串中所有標點符號和提取純文本的正則
這篇文章主要介紹了javascript去除字符串中所有標點符號和提取純文本的正則,需要的朋友可以參考下2014-06-06
JavaScript實現(xiàn)的簡單Tab點擊切換功能示例
這篇文章主要介紹了JavaScript實現(xiàn)的簡單Tab點擊切換功能,涉及JavaScript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
PHP abstract與interface之間的區(qū)別
本文是對PHP中abstract與interface之間的區(qū)別進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助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)
這篇文章主要為大家詳細介紹了Bootstrap CSS組件之按鈕組(btn-group)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Echarts可以幫助我們快速構建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關于Echarts中l(wèi)egend屬性使用的相關資料,需要的朋友可以參考下2022-04-04
學習Bootstrap滾動監(jiān)聽 附調(diào)用方法
這篇文章主要為大家全面解析Bootstrap中滾動監(jiān)聽的使用方法，感興趣的小伙伴們可以參考一下2016-07-07