見出しリストを作る

<script>
	(function() {
		function initStorageBlog() {

			// 任意の親要素(親要素のクラスを引数に取る)内の見出し要素(h2)の配列を返す関数
			function getHeadersInBlock(containerSelector) {
				// 親要素を取得
				const container = document.querySelector(containerSelector);

				if (!container) {
					console.warn("指定された親要素が見つかりませんでした。");
					return [];
				}

				// カンマ区切りで複数のタグを指定
				const headers = container.querySelectorAll('h2');

				// NodeList を純粋な Array に変換して返す
				return Array.from(headers);
			}

			// 親要素のクラス名を引数にしてgetHeadersInBlockを実行し、見出し要素の配列を取得
			const myHeaders = getHeadersInBlock('<.親要素クラス名>');

			const headerData = myHeaders.map(el => {
			return {
				id: el.id || null,      // idがない場合はnullを返す
				html: el.innerHTML      // 中身のHTMLを取得
			};
			});

			const targetList = document.getElementById('<表示するulタグに付けたid名>');

			const htmlString = headerData.map(item => {
			return `<li><a href="#${item.id}">${item.html}</a></li>`;
			}).join('');

			targetList.innerHTML = htmlString;

		}

		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', initStorageBlog);
		} else {
			initStorageBlog();
		}
	})();
</script>