Pixel Pedals of Tomakomai

北海道苫小牧市出身の初老の日常

HTMLとDOMの微妙な差異

実践Ajaxを読んでいたら、HTMLの記述とDOMには微妙に違いがあると書いてあったので実験してみました。

<html>
<body>
<div id="main" style="background: #CCC;"></div>

<table>
<tr><td>COLUMN</td></tr>
</table>

<script type="text/javascript">
<!--
var _ret = [];

function digDOM(element, depth){
    var i;
    var children = element.childNodes;

    // このエレメントの表示
    for(i = 0; i < depth; i++) _ret.push("    ");
    _ret.push(element.nodeName);
    _ret.push("\n");

    // 潜る
    for(i = 0; i < children.length; i++){
        digDOM(children[i], depth + 1);
    }

    return;
}

// 素潜り開始
digDOM(document.documentElement, 0);

// 結果の表示
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<pre>" + _ret.join("") + "</pre>";
//-->
</script>
</body>
</html>
HTML
    BODY
        #text
        DIV
        #text
        TABLE
            #text
            TBODY
                TR
                    TD
                        #text
        #text
        SCRIPT
            #text

ほんとだ。HTMLにはないTBODY要素があります。




なお、これはSafariの結果で、FireFoxだとHTMLの直下にHEAD要素も足してくれてました。へー。