實現原理很簡單，就是循環文章模塊，並抽取其中的h2、h3標籤，將其中的內容賦予給新建的title樹。
代碼如下：
HTML代碼：
<div> <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 id="articleMenu_box"> <span id="articleMenu_open"></span> <ul id="articleMenu"> <span 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; // 創建文檔片段，來包裹自動生成的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> <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 id="articleMenu_box"> <span id="articleMenu_open"></span> <ul id="articleMenu"> <span 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; // 創建文檔片段，來包裹自動生成的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自動生成文章標題樹的全部內容，希望本文的內容對大家能有所幫助，如果有疑問可以留言討論。