reflux flow > DOM（JavaScript）によるHTML/XHTML文書の構造化 #2

DOM（JavaScript）によるHTML/XHTML文書の構造化 #2

このページの目次

1. 概要
2. JavaScriptによる実装
3. サンプル

公開日

2008-01-01

最終更新日

2008-01-01T22:17:50+09:00

概要

「DOM（JavaScript）によるHTML/XHTML文書の構造化 #1」のコードに手を加えたものです。DOMツリーの辿り方が異なるだけで、基本的なアイディアは同じです。

JavaScriptによる実装

function structurize() {
  var h1 = document.getElementsByTagName("h1");
  if (h1.length == 0) return; // h1要素が無い場合は終了

  var parent = h1.item(0).parentNode;
  var section = new Array(7);
  var currentLevel = 0;
  section[0] = document.createDocumentFragment();
  var next = h1.item(0);
  while (next != null) {
    var node = next;
    next = node.nextSibling;
    if (node.nodeType == 1 /* ELEMENT_NODE */ &&
            node.nodeName.match(/^h([1-6])$/i)) {
      // 見出しの場合はdiv要素（section）を追加
      currentLevel = parseInt(RegExp.$1);
      var newSection = document.createElement("div");
      newSection.className = "section";
      section[currentLevel - 1].appendChild(newSection);
      section[currentLevel] = newSection;
    }
    section[currentLevel].appendChild(node);
  }
  parent.appendChild(section[0]);
}

このstructurize()関数を、文書が読み込まれた後に呼び出します。

サンプル

• structuring2-sample.html