緣由：

緣由很簡單，因為我的博客文章希望有文章標題樹，但是wordpress自動生成文檔樹比較麻煩，恰好也想用JavaScript實現試試。用了一 個下午的時間，還是沒能保留獲取的h2、h3的文檔順序，最后只好用了個障眼法——通過修改分別修改title樹的h2、h3的class樣式來實現區 分。其實最希望能自動分配序號，但目前還沒實現。等過些日子再想想吧。

實現原理很簡單，就是循環文章模塊，并抽取其中的h2、h3標簽，將其中的內容賦予給新建的title樹。

我的博客使用的是客戶端生成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("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);

}
</code></pre> 
  
來自：http://www.dengzhr.com/js/428