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

概要

見出し（h1-6）要素を目印にしてdiv要素を追加します。

<!-- 構造化前 -->
<h1>見出し</h1>
<p>本文</p>
<h2>見出し</h2>
<p>本文</p>
<h3>見出し</h3>
<p>本文</p>
<h2>見出し</h2>
<p>本文</p>

<!-- 構造化後 -->
<div class="section">
  <h1>見出し</h1>
  <p>本文</p>
  <div class="section">
    <h2>見出し</h2>
    <p>本文</p>
    <div class="section">
      <h3>見出し</h3>
      <p>本文</p>
    </div>
  </div>
  <div class="section">
    <h2>見出し</h2>
    <p>本文</p>
  </div>
</div>

JavaScriptによる実装

DOM Level1を利用します。

function structurize() {
    var h1 = document.getElementsByTagName("h1");
    if (h1.length == 0) return; // h1要素が無い場合は終了
    var workingNode = h1.item(0).parentNode; // h1の親要素（body要素など）
    
    // NodeListの内容は変化するので、順番を取得しておく
    var child = workingNode.childNodes;
    target = new Array();
    for (var i = 0; i < child.length; i++) {
        target[i] = child.item(i);
    }
    
    // 構造化
    var section = new Array(7);
    var sectionLevel = 0;
    section[sectionLevel] = workingNode;
    for (var i = 0; i < target.length; i++) {
        var node = target[i];
        if (node.nodeType == 1 /* ELEMENT_NODE */ &&
                node.nodeName.match(/^h([1-6])$/i)) { // 見出しの場合
            sectionLevel = parseInt(RegExp.$1);
            var newSection = document.createElement("div");
            newSection.className = "section";
            section[sectionLevel - 1].appendChild(newSection);
            section[sectionLevel] = newSection;
        }
        section[sectionLevel].appendChild(node);
    }
}

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

window.onload = function() {
    structurize();
};

こんな感じです。

サンプル

• structuring-sample.html

関連記事

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