Nodeのサンプル

サンプル1

ブラウザによって子ノードの扱いがまちまちで面白いです(面白がってる場合じゃない)。 IE6だとコメント,コメント,<HTML>、Firefox1.5だとhtmlのDTD,<HTML>、Opera9だとターゲットxmlの処理命令,<HTML>、となります。 この3つを折衷したの(xmlの処理命令,htmlのDTD,<HTML>)が正しいような気がするんですが…?
子要素に空文字列(含む改行文字)を考慮するかどうかで結果が違うようです。 たぶん子要素として出てくるのは#textが正しいと思うんですが、よくわかりません。

ソース1

function testdocument(){
  alert("nodeType:" + document.nodeType);
  for(i=0;i<document.childNodes.length;i++){
    tmp = document.childNodes[i];
    alert("子ノード"+i+"番目のnodeType: "+tmp.nodeType+"  nodeName:"+tmp.nodeName);
    if(tmp.nodeType == 8){
      alert("内容: "+tmp.data);
    }
    if(tmp.nodeType == 7){
      alert("内容: "+tmp.nodeValue);
    }
    if(tmp.nodeType == 10){
      alert("内容: "+tmp.name + " " + tmp.publicId + " " +  tmp.systemId);
    }
  }
}

function testbody(){
  bodyelm = document.getElementsByTagName('body')[0];
  alert("nodeName: " + bodyelm.nodeName);
  alert("親要素のnodeName: " + bodyelm.parentNode.nodeName);
  alert("前の要素のnodeName: " + bodyelm.previousSibling.nodeName);
  alert("次の要素: " + bodyelm.nextSibling + " (nodeNameとか書くとバグります)");
  alert("最初の子要素のnodeNameとnodeValue: " + bodyelm.firstChild.nodeName + " " + bodyelm.firstChild.nodeValue);
  alert("最後の子要素のnodeNameとnodeValue: " + bodyelm.lastChild.nodeName + " " + bodyelm.lastChild.nodeValue);
}

DOM Coreを使って書いてるのでこんなことになってますが、DOM HTMLも使えばもう少しすっきりするはず。

サンプル2

appendとかremoveとかreplaceとかつかいまくるサンプルを作る予定。