HTMLスロットを使って目次を自動生成する方法
目次 たとえば、多くのWebサイトのユーザーエクスペリエンスを大幅に向上させることができます。 ドキュメントサイト または オンライン百科事典 ウィキペディアのように。うまく設計された目次 ページの概要を説明します また、興味のあるセクションにすばやく移動できます。.
伝統的には、HTMLでもJavaScriptでも目次を作成できますが、最近標準化されたHTMLスロットは 両者の中間の道. HTMLスロット あなたができるWeb標準です。 Webページにプレースホルダを追加する 以降 コンテンツを動的に埋めます.
いつ使うのか
あなたは置くことができます
この手法では、目次のHTMLソースコードを手動で作成する必要があります。 JavaScriptは目次のテキストコンテンツのみを自動生成します, ページの見出しまたは小見出しに基づく.
HTMLに目次を表示したくない場合は、次のようにします。 JavaScriptを使用してレイアウトとコンテンツの両方を生成する.
1. HTMLを作成する
目次（目次）のHTMLソースコードは次のようになります。 の中 タグ. 内部のコード JavaScriptでドキュメントに追加されるまでレンダリングされません。私たちの目次は プレースホルダー, で開催されました
の 名 それぞれの属性 スロット 文書内の対応する見出しおよび小見出しの属性.
下に、あなたは見ることができます サンプルHTML Velociraptor（ラテン語では「速いseizer」を意味する）は… Velociraptorは、成人向けの中型のdromaeosauridでした… ドロマサウルスの化石より原始的… アメリカ自然史博物館探検中… VelociraptorはEudromaeosauria、派生サブグループのメンバーです… 1971年に発見された "Fighting Dinosaurs"標本は、… 2010年に、Honeとその同僚は…に関する論文を発表しました。 それが必要とするのでVelociraptorはある程度温血でした… 1つのVelociratoptor mongoliensis頭蓋骨は、2つの平行をします… ご覧のとおり、各見出しは ユニークな そして、これが 目次のHTMLコード, の中 上記の2つのコードスニペットで、 マッチング から目次を追加するJavaScriptコードを調べる前に を確認してください それでは、次のスクリプトを追加します。 の上に目次を挿入します 上記のコードスニペット のコピーを作成します その後、クローン CSSカウンタをリセットすると、 これが出力のスクリーンショットです。 あなたがしたい場合は 目次のタイトルをそれぞれの見出しと小見出しにリンクする 追加して Velociraptor（ラテン語では「速いseizer」を意味する）は… Velociraptorは、成人向けの中型のdromaeosauridでした… ドロマサウルスの化石より原始的… あなたが上で見ることができるように、 そしてその 目次内のタイトルは固定されています： 上記の余分な行では、すべて のスクリーンショットを見る リンクされた目次 以下： この記事で使用されているコードをGithub Repoからチェックアウト、ダウンロード、またはフォークすることができます。. いくつかの見出しと小見出し. の
説明
羽毛
発見の歴史
分類
古生物学
清掃行動
代謝
病理
スロット 値. タグ.
スロット そして 名 属性 見出しの中 2.見出しに番号を付ける
文書に、ましょう CSSカウンタを使用して、見出しのシリアル番号を追加します。. 記事カウンターリセット：見出し;記事h2 :: before counter-increment：見出し;内容： '0'カウンタ（見出し） '：';
カウンターリセット ルールはその要素に属します を所有するすべてのタイトルの直接の親 スロット 属性 （これは 私たちのコード内の要素）.ドキュメントに目次を挿入する
タグ, の中 容器. templateContent = document.querySelector（ 'template'）。content; article = document.querySelector（ 'article'）。cloneNode（true）; article.attachShadow（mode： 'closed'）。appendChild（templateContent.cloneNode（true））; document.querySelector（ '＃toc'）。appendChild（記事）;
そして Shadow DOMツリーをそれに添付します. 私達も のコピーを追加 の内容 このShadow DOMツリーへ. に挿入されます 要素は 現在も目次に表示されています, ただし、目次内にプレースホルダーが見つかった見出しと小見出しだけが表示されます。. 体 または html の代わりに要素 記事, カウンターは目次内の見出しのリストも数えたでしょう。それがあなたがすべき理由です 見出しのすぐ上の親にあるカウンタをリセットする.
4.ハイパーリンクを追加する
id 見出しを見出し、対応する目次のテキストを固定する 繰り返しを削除 id クローンからの値 記事.
説明
羽毛
id 属性は 記事のすべての見出しと副見出しに追加.
id 属性は クローン記事から削除 前 Shadow DOMツリーを添付する. templateContent = document.querySelector（ 'template'）。content; article = document.querySelector（ 'article'）。cloneNode（true）; article.querySelectorAll（ '* [id]'）。forEach（（ele）=> ele.removeAttribute（ 'id'））article.attachShadow（mode： 'closed'）appendChild（templateContent.cloneNode（true） ;）; document.querySelector（ '＃toc'）。appendChild（記事）;
Githubのデモ
