原生JS实现自动生成文章标题树

   <h2>缘由：</h2>    <p>缘由很简单，因为我的博客文章希望有文章标题树，但是wordpress自动生成文档树比较麻烦，恰好也想用JavaScript实现试试。用了一 个下午的时间，还是没能保留获取的h2、h3的文档顺序，最后只好用了个障眼法——通过修改分别修改title树的h2、h3的class样式来实现区 分。其实最希望能自动分配序号，但目前还没实现。等过些日子再想想吧。</p>    <p>实现原理很简单，就是循环文章模块，并抽取其中的h2、h3标签，将其中的内容赋予给新建的title树。</p>    <p>我的博客使用的是客户端生成title树的方法。</p>    <h2>代码如下：</h2>    <h3>HTML代码：</h3>    <pre>  <code class="language-javascript"><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>  </code></pre>    <h3>CSS代码：</h3>    <pre>  <code class="language-javascript">* {      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%;  }  </code></pre>    <h3>JavaScript代码：</h3>    <pre>  <code class="language-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>    <p>来自：http://www.dengzhr.com/js/428</p>