1. ホーム
2. パソコン
3. javascript

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

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

やりたいこと

HTML

<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タグをすべて取得

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);
    }
}

参考

【javascript】HTML要素を生成させるcreateElementの使い方

ページ内リンクとページトップへのスムーススクロールの実装 scrollToのOptions未対応にも対応させる

【javascript】バッククォート内のドルマークの使い方 ` ${ } `

まとめ