脱皮スクリプト

以下のような構造のHTMLから、Document Object Modelでdivタグを取り除こうと思った。

<div class="section">

<h1>見出し</h1>

<p>段落１</p>
<p>段落２</p>

</div>

ある要素を消去するには、その要素の親要素にアクセスして、メソッドremoveChild()を使う。しかしdivを消してしまったら、中身も消えてしまうので、div要素を消す前に中身（h1、p要素）を外に出さなければならない。

そこで、そのdivの子要素群（childNodes）をコピーしておこうと考えたが、childNodesは、NodeList型なので、コピーするためのメソッド、cloneNode()メソッドが使えない。どうしようか。まさか子要素一つ一つコピーしたり移植したりするわけにも行かない。

cloneNode()メソッドのパラメータはtrueかfalse。trueならなdivの中身のh1やらpやらも丸ごとコピーし、falseなら中身の子要素群は除外される。ダメだこれは。

仕方がないので、良い方法が見つかるまではその「まさか」で代用してみることにした。

• 見出し

  段落１

  段落２

脱皮スクリプト

function dappi(){
 var d = document;
 var elmLI = d.getElementById('dappiSample');
 var nlChildren = elmLI.childNodes;
 var elmUL = elmLI.parentNode;
 while(nlChildren.length !== 0)
 {
  var child = nlChildren.item(nlChildren.length-1);
  if(child.nodeName !== 'P') continue;
  var clone = elmLI.removeChild(child);
  elmUL.parentNode.insertBefore(clone, elmUL.nextSibling);
 }
}dappi();

このIEの挙動は、DOMユーザを裏切るものだ。Mozillaは期待通り。まあそれはともかくとして、このスクリプトを、このページの全セクションに実行したら多分如何なるブラウザでもタダでは済むまい。

この逆、つまりセクションをさらにdivで内包（それも四重に）するスクリプトをこのページで実行してみたら、IEはフリーズした。それを遥かに凌ぐ処理量だもの。この脱皮スクリプトは。