【javascript】hタグを取得し、目次を自動生成する方法

投稿日 : 2023年09月17日更新日 :

やりたいこと
HTML
目次生成の手順
まとめ

やりたいこと

以下のように、javascriptで h2タグとh3タグを取得し、目次を自動生成する方法を紹介します。

今回は、h2タグとh3タグのみを取得し、生成します。

HTML

h2タグとh3タグにそれぞれidを指定しておきます。

目次をクリックしたら、その項目にジャンプします。

<section>
  <h2 id="index1">サブタイトル1</h2>
  <h3 id="index1a">サブタイトル1-a</h3>
  <h3 id="index1b">サブタイトル1-b</h3>
</section>
  
<section>
  <h2 id="index2">サブタイトル2</h2>
  <h3 id="index2a">サブタイトル2-a</h3>
  <h3 id="index2b">サブタイトル2-b</h3>
</section>

目次生成の手順

querySelectorAllでhタグをすべて取得

以下のように書くことで、h2タグとh3タグがすべて取得できます。

const index = document.querySelectorAll("h2, h3");

hタグの数だけforでループさせる

for (let i = 0; i < hTag.length; i++) {
  const element = hTag[i];
}

hタグがh2なのかh3なのか判別

for (let i = 0; i < hTag.length; i++) {
  const element = hTag[i];
  if(element.tagName=="H2"){
    // h2の時の処理
  }else{
    // h3の時の処理
  }
}

h2とh3のそれぞれの処理

const hTag = document.querySelectorAll("h2, h3");
const ul = document.getElementById("contents"); // 目次が生成される要素
let h2Cnt = 1; // h2タグ内のulのカウンター

for (let i = 0; i < hTag.length; i++) {
    const element = hTag[i];
    if(element.tagName=="H2"){
        // li a ul タグを生成
        const li = document.createElement("li");
        const aTag = document.createElement("a");
        const nestUl = document.createElement("ul");
        nestUl.classList = `ul${h2Cnt}`; // ポイント ここにそれぞれのh3が生成される
        aTag.textContent = element.textContent;
        aTag.href = "#"+element.id;
        ul.appendChild(li);
        li.appendChild(aTag);
        li.appendChild(nestUl);
        h2Cnt++;
    }else{
        const li = document.createElement("li");
        const aTag = document.createElement("a");
        aTag.textContent = element.textContent;
        aTag.href = "#"+element.id;
        // 生成される場所を取得
        const nestUl = document.querySelector(`.ul${h2Cnt-1}`);
        nestUl.appendChild(li)        
        li.appendChild(aTag);
    }
}