小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
今天受了点刺激，进而激发了学习欲望，于是打开XX教育准备学习。文章才读了一半，总觉得哪里不太对劲，这标题… 应该是有层级的？打开 F12 看了一眼，哎是的… 可是这层级也太不明显了，肉眼分辨有点困难呀。
高中时代老师就常说：“看书先看目录，大标题、小标题，目录看下来你就知道整个说的是啥啦！” 因为养成了看目录的习惯，这不好识别的层级结构让我很是难受。于是琢磨着自己写个脚本把目录输出来看一下。
控制台输出简易目录
查看页面的DOM结构，发现文章的核心内容都在 .rich-text-wrap 节点中，且只有一级子节点，直接获取 children 再过滤出 h 元素节点，再按着想要的格式输出一下就可以了。事不宜迟，马上开始 ——
//获取文本节点
const nodes = document.getElementsByClassName('rich-text-wrap')[0].children
//筛选标题节点. 注意是大写H
const titleNodes = [].slice.apply(nodes).filter(node=>node.tagName.includes('H'))
//构造目录结构：拼接节点内容
const baseLevel = titleNodes[0].tagName.slice(1,)
let str = ''
titleNodes.forEach(node=>{
const level = node.tagName.slice(1,) - baseLevel
const indent = ' '.repeat(level*4)
str+= `${indent}|\n${indent}|--${node.innerHTML}\n`
})
//输出到控制台瞅瞅
console.log(str)
来看看效果：
哎~ 还可以，这下文章结构就清晰啦~ 要定位想看的内容也方便多了。
小知识复习
- 获取到的
nodes是个类数组，类数组没有遍历方法，需要先将类数组转为数组再遍历。上文用到的是[].slice.apply()方法。更多关于类数组和数组的知识，可查看我上一篇文章：类数组和数组 - 在生成缩进当中用到了
repeat方法去生成多个空格，这个方法平常没怎么用上，不过还真是好使哈哈哈，复习了。
碎碎念
- emmm.. 这个用来应付这种篇幅不长的小文章是够了。如果篇幅较长，层级较多，这个输出是不是也太长了。果然还是弄成树结构输出比较好看吧，要能折叠那种。我印象中
console好像有直接输出树的方法来着？会不会更便捷更美观呢，回头再看看。困了 - -
偶尔写写这种带来一定便利性的小脚本，会有幸福感哎~ 有知识派上用场了的感觉 ^ ^
