實(shí)現(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)建文檔片段，來包裹自動(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>二級標(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)建文檔片段，來包裹自動(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)容對大家能有所幫助，如果有疑問可以留言討論。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
