首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 22, 2016

实现原理很简单，就是循环文章模块，并抽取其中的h2、h3标签，将其中的内容赋予给新建的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("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 class="contextBox">
 <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 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>
<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自动生成文章标题树的全部内容，希望本文的内容对大家能有所帮助，如果有疑问可以留言讨论。

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

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
JavaScript日历实现代码
Sep 12 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
微信小程序实现树莓派（raspberry pi）小车控制
Feb 12 Javascript
JS数组的常用方法整理
Mar 31 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 #Javascript
js严格模式总结(分享)
Aug 22 #Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 #Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 #Javascript
PL990(2) BCL3000(2) ICF-SW07(1) S400(1) PL450(1) S700(1) 低放电路(1) S500(1) Grundig(1) H-501(1)
You might like
十大“创意”战术！
2020/03/04 星际争霸
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php使用session二维数组实例
2014/11/06 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php注册审核重点解析（数据访问）
2017/05/23 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JavaScript运动框架 链式运动到完美运动（五）
2017/05/18 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
vue的mixins属性详解
2018/03/14 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
python网络编程学习笔记(五)：socket的一些补充
2014/06/09 Python
Python实现提取文章摘要的方法
2015/04/21 Python
利用python发送和接收邮件
2016/09/27 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python线程同步的实现代码
2018/10/03 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python实现横向拼接图片
2020/03/23 Python
美国滑雪板和装备购物网站：Skis.com
2018/12/20 全球购物
Crocs波兰官方商店：女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
升职自荐信
2013/11/28 职场文书
回门宴父母答谢词
2014/01/26 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
优秀党员推荐材料
2014/12/18 职场文书
清明扫墓感想
2015/08/11 职场文书