ページに目次を追加するJavascript作ってみた

目次を自動的に追加するJavascriptが欲しかった

ブログサイトを作成しており，記事には目次がほしい！って思っていました．けれでもどうやればいいのかわからなかったので長い間放置していました．が，少しJavascriptで遊んでいるうちにDOM操作の方法がだんだんわかってきたので目次を自動的に追加するjavascriptを作ってみました．結論として以下のgithubに公開しているような感じを作りました．

github.com

デモ soyukke.github.io

仕様

記事タイトルはh1
記事のサブタイトルはh2及びh3．h4は使用しない
目次には各サブタイトルh2, h3をlistで羅列する．h3はh2より深く表示する．
目次のサブタイトルをクリックすると記事のサブタイトルの位置に飛べるようにする．
目次の挿入位置は記事タイトルの下

上記のような仕様にしました．

実装のポイント

サブタイトルにidをつける

目次から飛ぶために，各サブタイトルの要素にサブタイトルのidをつける．

  // bodyの上から順にh2, h3タグの要素をとってくる．h1はタイトルなので除外
  let titles = document.querySelectorAll("h2, h3");
  // それぞれのタイトル要素にidつける
  titles.forEach(title => {
    title.id = title.textContent;
  });

https://github.com/Soyukke/AddIndex/blob/d47a9cee9123d584e54eae5398590a5b9b3ba6a1/script.js#L31-L36

目次要素を記事タイトルの下に追加する

h1タグの記事タイトル要素の次要素の前に追加する．つまりh1タグ要素のすぐあとに目次要素を追加する．

  // タイトルの下に目次の要素index_boxを追加
  document.body.insertBefore(index_box, document.querySelector("h1").nextSibling);

https://github.com/Soyukke/AddIndex/blob/d47a9cee9123d584e54eae5398590a5b9b3ba6a1/script.js#L40-L41

目次クリックで各サブタイトルの位置に飛べるようにする

      let title = titles.shift();
      let li = document.createElement("li");
      let a = document.createElement("a");
      a.textContent = title.textContent;
      a.href = "#" + title.textContent;
      li.appendChild(a);
      ul.appendChild(li);

https://github.com/Soyukke/AddIndex/blob/d47a9cee9123d584e54eae5398590a5b9b3ba6a1/script.js#L14-L20

おしまい

これで任意の位置に目次を突っ込めるようになったぜ．