根据H标签自动生成导航目录

根据H标签自动生成导航目录

提取页面中的H标签自动生成目录，并且能够实现锚点定位

假设页面的部分内容如下，同时为了展现出锚点定位的效果，给包含内容的div元素设置一定高度

  <div id="menu">menu</div>
  <div id="wrap">
    <h2>header1</h2>
    <div>aaaaa</div>
    <h3>header1-1</h3>
    <div>bbbbb</div>
    <h3>header1-2</h3>
    <div>ccccc</div>
    <h2>header2</h2>
    <div>ddddd</div>
    <h3>header2-1</h3>
    <div>eeeee</div>
    <h3>header2-2</h3>
    <div>fffff</div>
    <h2>header3</h2>
    <div>ggggg</div>
    <h3>header3-1</h3>
    <div>hhhhh</div>
    <h3>header3-2</h3>
    <div>iiiii</div>
  </div>

 

现在实现一个函数，提取页面中的H标签，将生成的导航目录放在id为menu的div内

function createMenu() {
      // 首先获取所有H标签，若页面中有h4，h5，h6则可以添加到参数中
      var headList = [...document.querySelectorAll('h1,h2,h3')]
      // 将H标签构造成一棵树，就可以明确H标签之间的层级
      var root = {
        children: []
      }
      var h = {
        node: headList[0],
        children: [],
        parent: root
      }
      root.children.push(h)
      headList.reduce(function (pre, cur) {
        var n = {
          node: cur,
          children: []
        }
        while (h.node.localName[1] - n.node.localName[1] !== -1) {
          h = h.parent
          if (h === root) {
            break
          }
        }
        n.parent = h
        h.children.push(n)
        h = n
        return h
      })
　　　 // 给H标签加id
      var index = 1
      function createList(list) {
        var text = list.reduce(function (pre, cur) {
          var childText
　　　　　　// 判断该H标签有没有子层H标签
          if (cur.children.length) {
            childText = createList(cur.children)
          } else {
            childText = ''
          }
          cur.node.id = 'header' + index++
          pre += `<li>
                    <a href="#${cur.node.id}">
                      ${cur.node.innerHTML}
                    </a>
                    ${childText}
                  </li>`
          return pre
        }, '')
        var text = `<ul> ${text} </ul>`
        return text
      }
      var content = createList(root.children)
      document.getElementById('menu').innerHTML = content
    }