首页
所有分类
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跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
AngularJS中的API（接口）简单实现
Jul 28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
js实现贪吃蛇小游戏（容易理解）
Jan 22 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
JavaScript的Set数据结构详解
Feb 18 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
查询效率(1) kubernetes(1) Express(1) delete in(1) group by(1) 分布式追踪(1) GPU(1) 字段分割(1) 表结构(1) REGEXP(1)
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php流量统计功能的实现代码
2012/09/29 PHP
php检查页面是否被百度收录
2015/10/28 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
VUE+node（express）实现前后端分离
2019/10/13 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
Python入门篇之列表和元组
2014/10/17 Python
详解Python中的文本处理
2015/04/11 Python
一个基于flask的web应用诞生 组织结构调整（7）
2017/04/11 Python
python生成二维码的实例详解
2017/10/29 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Speedo速比涛中国官方网站：全球领先泳装运动品牌
2018/04/24 全球购物
菲律宾优惠券网站：MetroDeal
2019/04/12 全球购物
科研先进个人典型材料
2014/01/31 职场文书
财务部经理岗位职责
2014/02/03 职场文书
促销活动总结报告
2014/04/26 职场文书
企业安全标语
2014/06/07 职场文书
物资采购方案
2014/06/12 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014年班级工作总结范文
2014/12/23 职场文书