table-of-contents

table-of-contents.js

const table_of_contents = document.querySelectorAll(".table-of-contents");
let table_of_contents_counter = 1;
table_of_contents.forEach(table => {
    const headings = table.parentElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
    const stack = [{ level: 0, element: table }];

    headings.forEach(heading => {
        const li = document.createElement("li");
        const a = document.createElement("a");
        const id = `section-${table_of_contents_counter++}`;
        const ol = document.createElement("ol");

        // 目次要素の生成
        a.textContent = heading.textContent;
        a.href = `#${id}`;
        li.appendChild(a);
        li.appendChild(ol);

        // リンク先の生成
        heading.id = id;
        heading.classList.add("anchor-link");

        // 階層構造の生成
        const level = Number(heading.tagName.substring(1));
        let parent;
        do {
            parent = stack.pop();
        } while (parent.level >= level);
        parent.element.appendChild(li);
        stack.push(parent);
        stack.push({ level: level, element: ol });
    });
});

JavaScript で html の目次を自動生成します。

・使用方法

1. table-of-contents.js を body 要素の末尾で読み込みます。
2. 目次を設置する場所に <ol class="table-of-contents"></ol> を書きます。

・目次の生成ルール
<ol class="table-of-contents"></ol>の親要素配下にある h1〜h6 要素が見出しになります。
h1〜h6 の並ぶ順番によって階層構造が作られます。

（例）
h1: A
h2: B
h3: C
h2: D
h4: E

↓

A
　B
　　C
　D
　　E