[javascript メモ 途中] Q. DOMのツリー構造とは?

A.
DOMはHTMLをツリー構造で表します。
以下のHTMLのツリー構造をみてみましょう。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TITILE</title>
  <script type="text/javascript">
  var log = "";

  window.onload = function() {
    getChild( document.getElementsByTagName('body')[0], 0 );
//    getChild( document.getElementsByTagName('head')[0], 0 );
    console.log(log);
  };

  function getChild( nodes, lv ){
    for(var num in nodes.childNodes){
      if(nodes.childNodes[num].nodeName && nodes.childNodes[num].nodeType != 3){
         log += Level(lv) + nodes.childNodes[num].nodeName + "\n";
        if( nodes.childNodes[num].length != 0 ) getChild( nodes.childNodes[num], lv+1 );
      }
    }
  }

  function Level(vl){
    var mes = '';
    while(vl--) mes += '-';
    return mes;
  }
  </script>
</head>
<body>
<h1>一覧</h1>
<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>
<form action="./" method="get" name="userform" id="userform" onsubmit="return confirm();">
   <label>ニックネーム: <input type="text" name="nickname" id="nickname"></label>
  <input type="submit" value="送信">
</form>
</body>
</html>
nodeType=3以外のノード
js_dom_t1.png

これらのログからDOMのツリー構造を図で表してみます。

DOMのツリー構造の図
js_dom_t2.png ブラウザによって、DOMの解釈が異なります。
タクとタグの間にある空白や改行が無視されるかは
最も大きな違いとして認識されています。

参考サイト:
三等兵 jsのDOMによるノード取得
MDN Whitespace in the DOM
JavaScriptのDOM Core基礎