利用原生JS自动生成文章标题树的实例
实现原理很简单，就是循环文章模块，并抽取其中的h2、h3标签，将其中的内容赋予给新建的title树。
代码如下：
HTML代码：
<divclass="contextBox"> <divid="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hellohellohellohellohellohellohellohellohellohellohellohello</p> <h3>三级标题</h3> <h3>三级标题</h3> <h3>三级标题</h3> <h3>三级标题</h3> <p>hellohellohellohellohellohellohellohellohellohellohello</p> <h2>二级标题</h2> <h3>三级标题</h3> <h3>三级标题</h3> <p>worldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworldworld</p> <h3>三级标题</h3> <h3>三级标题</h3> <h2>二级标题</h2> <h3>三级标题</h3> <h3>三级标题</h3> <h2>二级标题</h2> <h3>三级标题</h3> <h3>三级标题</h3> <h2>二级标题</h2> <h3>三级标题</h3> <h3>三级标题</h3> </div> <divclass="articleMenu-box"id="articleMenu_box"> <spanclass="articleMenu-open"id="articleMenu_open"></span> <ulclass="articleMenuhello"id="articleMenu"> <spanclass="articleMenu-close"id="articleMenu_close"></span> </ul> </div> </div>
CSS代码：
*{
margin:0;
padding:0;
border:0;
}
body{
font:16px/1.5;
}
ulli,olli{
list-style:none;
}
.contextBox{
position:relative;
width:960px;
margin:0auto;
}
#article{
margin-left:200px;
border:1px#eeesolid;
padding:15px;
}
.articleMenua{
text-decoration:none;
color:#333;
}
.articleMenua:hover{
color:#f85455;
}
.articleMenu-box{
width:170px;
position:absolute;
left:10px;
top:10px;
}
.articleMenu{
padding:10px;
border:1pxsolid#ccc;
box-shadow:2px2px2px#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-repeat50%50%;
display:none;
}
.articleMenu.articleMenu-close{
background:url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png")no-repeat50%50%;
}
JavaScript代码：
vararticle=document.getElementById("article");
vararticleHgroupMenu=document.getElementById("articleMenu");
//关闭和展开文档树
vararticleMenu_open=document.getElementById("articleMenu_open");
vararticleMenu_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属性；
functiontitleHgroup(hgroupParent,MenuList,h2ClassName,h3ClassName){
varhgroup=hgroupParent.children;
//创建文档片段，来包裹自动生成的h2、h3对应生成的li列表
varfragment=document.createDocumentFragment();
for(i=0;i<hgroup.length&&hgroup[i].nodeType===1;i++){
//为对应类型的标题生成li列表
//参数说明：hType为标题的类型如h1~h6；className为标题对应的li列表的class属性值；
functiontitleToList(hType,className){
varli=document.createElement("li");
li.className=className;
//为li标签内部添加a标签，用锚点进行定位；
hgroup[i].id=hType+i;
li.innerHTML=("<ahref='#"+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);
}
完整实例代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>原生JS实现自动生成文章标题树</title>
<styletype="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
font:16px/1.5;
}
ulli,olli{
list-style:none;
}
.contextBox{
position:relative;
width:960px;
margin:0auto;
}
#article{
margin-left:200px;
border:1px#eeesolid;
padding:15px;
}
.articleMenua{
text-decoration:none;
color:#333;
}
.articleMenua:hover{
color:#f85455;
}
.articleMenu-box{
width:170px;
position:absolute;
left:10px;
top:10px;
}
.articleMenu{
padding:10px;
border:1pxsolid#ccc;
box-shadow:2px2px2px#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-repeat50%50%;
display:none;
}
.articleMenu.articleMenu-close{
background:url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png")no-repeat50%50%;
}
</style>
</head>
<body>
<divclass="contextBox">
<divid="article">
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/><br/>hello<br/>hell<br/>ohel<br/>lohell<br/>ohe<br/>llohello</p>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h3>三级标题</h3>
<h3>三级标题</h3>
<p>hellohellohellohellohellohellohellohellohellohellohello</p>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h3>三级标题</h3>
<p>worldw<br/>orld<br/>worldworldwo<br/>rldworldwo<br/>rldworldworldwor<br/>ldworldworld<br/>world<br/>worl<br/>dworld<br/>w<br/>orld<br/>worldwo<br/>rldwor<br/>ldworldwor<br/>ldworldworl<br/>dw<br/>or<br/>ld<br/><br/>world<br/>world<br/>world<br/><br/>wo<br/>rldwo<br/>rldw<br/>orldw<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>
<divclass="articleMenu-box"id="articleMenu_box">
<spanclass="articleMenu-open"id="articleMenu_open"></span>
<ulclass="articleMenuhello"id="articleMenu">
<spanclass="articleMenu-close"id="articleMenu_close"></span>
</ul>
</div>
</div>
<scripttype="text/javascript">
vararticle=document.getElementById("article");
vararticleHgroupMenu=document.getElementById("articleMenu");
//关闭和展开文档树
vararticleMenu_open=document.getElementById("articleMenu_open");
vararticleMenu_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属性；
functiontitleHgroup(hgroupParent,MenuList,h2ClassName,h3ClassName){
varhgroup=hgroupParent.children;
//创建文档片段，来包裹自动生成的h2、h3对应生成的li列表
varfragment=document.createDocumentFragment();
for(i=0;i<hgroup.length&&hgroup[i].nodeType===1;i++){
//为对应类型的标题生成li列表
//参数说明：hType为标题的类型如h1~h6；className为标题对应的li列表的class属性值；
functiontitleToList(hType,className){
varli=document.createElement("li");
li.className=className;
//为li标签内部添加a标签，用锚点进行定位；
hgroup[i].id=hType+i;
li.innerHTML=("<ahref='#"+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自动生成文章标题树的全部内容，希望本文的内容对大家能有所帮助，如果有疑问可以留言讨论。