目次自動生成用のJavaScriptを加工して取得範囲を広げたい

Question

下記ページで紹介されていた、目次自動生成用スクリプトをお借りして、H4タグまで取得出来るよう加工しようとしております。
参考サイト

    document.addEventListener('DOMContentLoaded', function () {
      var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
      var div = document.createElement('div'); // 作成する目次のコンテナ要素

      // .articleCont_main配下のh2、h3、h4要素を全て取得する

      var matches = document.querySelectorAll('.articleCont_main h2, .articleCont_main h3, .articleCont_main h4');


      // 取得した見出しタグ要素の数だけ以下の操作を繰り返す

      matches.forEach(function (value, i) {

        // 見出しタグ要素のidを取得し空の場合は内容をidにする

        var id = value.id;
        if (id === '') {
          id = value.textContent;
          value.id = id;
        }


        // 要素がh2タグの場合

        if (value.tagName === 'H2') {

          var ul = document.createElement('ul');

          var li = document.createElement('li');

          var a = document.createElement('a');


          // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

          a.innerHTML = value.textContent;

          a.href = '#' + value.id;

          li.appendChild(a)

          ul.appendChild(li);


          // コンテナ要素である<div>の中に要素を追加する

          div.appendChild(ul);

        }


        // 要素がh3タグの場合

        if (value.tagName === 'H3') {

          var ul = document.createElement('ul');

          var li = document.createElement('li');

          var a = document.createElement('a');


          // コンテナ要素である<div>の中から最後の<li>を取得する。

          var lastUl = div.lastElementChild;

          var lastLi = lastUl.lastElementChild;


          // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

          a.innerHTML = value.textContent;

          a.href = '#' + value.id;

          li.appendChild(a)

          ul.appendChild(li);


          // 最後の<li>の中に要素を追加する

          lastLi.appendChild(ul);

        }
		
		  
       // 要素がh4タグの場合

        if (value.tagName === 'H4') {

          var ul = document.createElement('ul');

          var li = document.createElement('li');

          var a = document.createElement('a');


          // コンテナ要素である<div>の中から最後の<li>を取得する。

          var lastUl = div.lastElementChild;

          var lastLi = lastUl.lastElementChild;


          // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

          a.innerHTML = value.textContent;

          a.href = '#' + value.id;

          li.appendChild(a)

          ul.appendChild(li);


          // 最後の<li>の中に要素を追加する

          lastLi.appendChild(ul);

        }

      });


      // 最後に画面にレンダリング

      contentsList.appendChild(div);

    });

取得する要素にH4を加え、出力するスクリプトはH3のものをコピーしてみました。

すると、H4情報は取得出来、リンク設定までは上手くいっているのですが、H3と同列の目次表示になりました。

独自にもう１階層下げるには、

// コンテナ要素である<div>の中から最後の<li>を取得する。
// 最後の<li>の中に要素を追加する

こちらをこのまま流用では駄目なのだろうなと思うのですが、このスクリプトをベースにして、もう１階層下を作ることは可能でしょうか？

=================================
ご助言いただきまして、生成したいHTML側のサンプルソースを追記させていただきます。
（リンク生成部分は割愛します）

<ul>
  <li>大項目（H2）
    <ul>
      <li>中項目（H3）
        <ul>
          <li>小項目（H4）</li>
        </ul>
      </li>
      <li>中項目（H3）</li>
    </ul>
  </li>
</ul>

先の素人改造スクリプトでは、H4が中項目階層になってしまうのですが、中項目生成時、”最後の”<li>という条件で情報取得しているので、加工のみでもう一段下に階層を作ることが出来るのかわからず、ご質問させていただきました。
HTMLを整理してみると、中項目の</li>位置をどう設定するかがポイントのような気もします…。

Comments

[itagagaki]

問題はわかっているようですが、漠然とではなく具体的にどういう構造のHTMLが作られればよいのかを考える必要があるということだと思います。こういう構造のHTMLにしたいというのを書いてみてください。

Answer 1

同階層になる理由はh3とh4の追加する処理が同じになってしまっているからです。

// コンテナ要素である<div>の中から最後の<li>を取得する。
var lastUl = div.lastElementChild;
var lastLi = lastUl.lastElementChild;

サンプルですとh2とh3しかありませんので、h3は最後の子要素を取得する（lastElementChild）やりかたで問題ないです。
しかしh4も追加となると3つの条件が必要なので真ん中の処理、つまりh3に何かしら処理をしなくてはならないのです。

Comments

[tomocha]

ご回答ありがとうございました！
２階層ならlastElementChildの利用で情報を拾えるけれど、H4のために３階層にするとなると、H3に”最後”という条件が使えなくなるため、こちらのサンプルを手直しして何とかなるレベルではなさそうです。

> このスクリプトをベースにして、もう１階層下を作ることは可能でしょうか？
こちらの当初の質問については、初心者の改修技術では難しいということで理解出来ました。
lastElementChildの情報をありがとうございました。

Answer 2

これは回答ではありません。
書く場所を間違えました。