IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

HTML5 のセクションアウトラインを取得する JavaScript

id:vantguarde さんが HTML5 のセクション 3 箇条を書かれて紹介しています

  • スタイルシートスクリプトの都合には使わないこと。それらにはdivを使うこと。
  • article, aside, navが適切な場合には、そちらを使こと。
  • セクションの先頭に見出しが自然に存在してない場合には使わないこと。
sectionの使い方とセクション三箇条 - vantguarde - web:g

すばらしいですね!

便乗して

セクションのアウトラインを求める JavaScriptYAPC 前夜祭で紹介したやつ)を公開します
http://amachang.sakura.ne.jp/misc/outliner.js

この JavaScript

以下のアルゴリズムをそのまま JavaScript で実装したものになっています
4.4.11.1 Creating an outline

また

以下のように、仕様との対応関係を記述してありますのでそちらも見てみてくださいね!

// http://amachang.sakura.ne.jp/misc/outliner.js

function createOutline(document) {

    // Let current outlinee be null. (It holds the element whose outline is being created.)
    var outlinee = null;

    // Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)
    var section = null;

    // Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.
    var stack = [];

    var nextSectionId = 1;

    // As you walk over the DOM in tree order, trigger the first relevant step below for each element as you enter and exit it.
    (function (element) {
        var elementInfo = { element: element, outline: null };
        if (trigger(elementInfo, true)) {
            return true;

(snip)