利用原生JS自动生成文章标题树的实例

// 关闭和展开文档树
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 = ("" + hgroup[i].innerHTML +"");
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);
}