topicPath - 目次データの取得　寝太郎の江戸風呂。ね！

2024
11
23

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 (Sat.)

2011
02
04

前回の「トピックパス/TopicPath」の記事では、topicPath を紹介しました。今後、何回かに分けて、そのスクリプトの考え方を説明します。今回は、基礎となる「
目次データの取得」についてです。

■ topicPath を利用するHTMLの構造

topicPath を利用する場合、HTMLの構造を次のように構成する必要があります。
(リスト中の#は、それに続く名前を id属性とする要素を意味します）

#topicPath
#contents
ul(#home)
   li>a(href:#subcontents1)
   li>a(href:#subcontents2)
   li>a(href:#content)
ul(#subcontents1)
   li>a(href:#subcontents11)
   li>a(href:#subcontents12)
   li>a(href:#content1)
ul(#subcontents2)
   li>a(href:#contents21)
   li>a(href:#contents22)
#content
#content1
#content21
#content22

#topicPathは、トピックパスを表示する領域です。
#contentsは、目次とトピックをないようとする領域です。

■ 目次データの取得
HTMLが上記のような構造ならば、これから目次データを取得することは簡単です。
すなわち、#contents の中の UL要素の中にある A要素に着目します。

A要素は、リンク先の id 属性を href 属性に持っています。そして、その innerHTML は、リンク先のタイトルと通常、一致します。これで、id と title を項目に持つレコードが作成できます。

さらに、このレコードに、親の idを持たせれば、親子関係も保持するレコードになります。

topicPath では、このレコードの１行をオブジェクトとして把握します。すなわち、次のようなスタイルです。

{id:id,title:title,parent:parentId}

topicPath は、このオブジェクトを要素として、「目次データ」配列に格納します。
そして、この「目次データ」配列を基礎データとして、トピックパスを作成します。

次回は、「目次データ」から親子関係を遡って、先祖を探す方法を説明します。