見出しから目次を自動で作成 | JavaScriptレシピ集 | CookBook

見出し抜き出し機能作成 では､早速見出しから目次を作成するプログラムを作成してみましょう。 やることも単純で、対象となる見出しを探し、見出しのランクに応じて目次の階層構造（ol要素を使用します）を作成するというものになります。 見出しを出力する要素を検索する機能 これは非常にシンプルです。document.querySelectorを使うことで、出力先の要素を検索することができます。 document.querySelectorにはCSSのセレクタを指定できますので、ID名やクラス名で対象要素を1つだけ検索できます。 下記の例では、TOC_INSERT_SELECTORに出力する要素のID名を入れ、document.querySelectorで検索を行います。 const TOC_INSERT_SELECTOR = '#toc'; // [セレクター指定] 目次を挿入する要素 queryS