基于HTML5 Heading 标签的 TOC 导航生成

[gogoend]

需求

有如下一篇文章：

<h1>gogoend的简历</h1>
<h2>个人信息</h2>
<dl>
    <dt>姓名</dt>
    <dd>gogoend</dd>
</dl>
<dl>
    <dt>星座</dt>
    <dd>人马座</dd>
</dl>
<dl>
    <dt>喜欢的颜色</dt>
    <dd>奶奶灰</dd>
</dl>
<h2>教育经历</h2>
<h3>大学</h3>
<ul>
    <li>2021.9 - 2025.7 哈弗大学 睡觉专业</li>
</ul>
<h3>中学</h3>
<ul>
    <li>2017.9 - 2021.7 建桥中学 刷牙专业</li>
</ul>
<h2>个人名言</h2>
<p>我要变瘦！！</p>

页面渲染效果如下：

如何通过这篇文章中的Heading（h1~h6）标签整理出一个目录（Topic of Content，TOC）？