ドム - S_a_k_Uの日記みたいなDB

黒い三連星じゃない。
ここのソースをお借りしてみました。
いろいろやって大分変わっちゃったけど。
IEはomake属性も読みやがったｗ
DOMのgetAttributeを勝手にやって、値が取得できるらしいな。
これがHTMLのDOMのいわゆる"仕様"なんじゃろうけど…
JavaScriptでもHTMLドキュメントの構造は、これに基本的に従っとんよな？？？
Firefoxは、HTMLのタグとして規定されていない属性はしらないから、getAttributeで取ってね。
IEは、DOMのgetAttributeで参照できるんなら取ってあげる。
ってスタンスかな？
にしても、getElementsByIdとgetElementsByNameのIEの動きは絶対おかしいというか、idもnameも関係なしかよｗ
FirefoxのDOM Inspectorってなかなかいいね。
オブジェクトも表示すると型が判るし、エラーコンソールといい、デバッグにイイ感じ。

Windows XP
Internet Explorer 6 SP2
Firefox 2.0.0.7

あとはこれをIE7で実行してみたい感じ。

<html>
  <head>
    <script type="text/javascript">
      function hoge() {
      
        var objId = document.getElementById('detail');
        var objName = document.getElementsByName('detail');
        var value = objId.getAttribute('value');
        var msg = 
            "【getElementById(detail)】\n" + objId + " = " + value
            + "\n\n<<value>>\n" + objId.value
            + "\n\n<<omake>>\n" + objId.omake
           + "\n\n【getElementsByName(detail)】\n" + objName + " = " + objName.value
            + "\n\n【collection】"
              ;
        
        for ( var i = 0 ; i < objName.length ; i++ ) {
            msg = msg + "\n<" + i + ">" + objName.item(i) + " = " + objName.item(i).getAttribute('value');
        }

        alert(msg);
        
        var objIdForm = document.getElementById('form');
        var objNameForm = document.getElementsByName('form');
        var valueForm = objIdForm.getAttribute('value');
        var msgForm = 
            "【getElementById(form)】\n" + objIdForm + " = " + valueForm
           + "\n\n<<value>>\n" + objIdForm.value
            + "\n\n<<omake>>\n" + objIdForm.omake
            + "\n\n【getElementsByName(form)】\n" + objNameForm + " = " + objNameForm.value
            + "\n\n【collection】"
              ;
        
        for ( var i = 0 ; i < objNameForm.length ; i++ ) {
            msgForm = msgForm + "\n<" + i + ">" + objNameForm.item(i) + " = " + objNameForm.item(i).getAttribute('value');
        }

        alert(msgForm);

        var objIdBody = document.getElementById('body');
        var objNameBody = document.getElementsByName('body');
        var valueBody = objIdBody.getAttribute("value");
        var msgBody = 
            "【getElementById(body)】\n" + objIdBody + " = " + valueBody
            + "\n\n<<value>>\n" + objIdBody.value
            + "\n\n<<omake>>\n" + objIdBody.omake
            + "\n\n【getElementsByName(body)】\n" + objNameBody + " = " + objNameBody.value
            + "\n\n【collection】"
              ;
        
        for ( var i = 0 ; i < objNameBody.length ; i++ ) {
            msgBody = msgBody + "\n<" + i + ">" + objNameBody.item(i) + " = " + objNameBody.item(i).getAttribute('value');
        }

        alert(msgBody);

        var objIdDiff = document.getElementById('diff');
        var objNameDiff = document.getElementsByName('diff');
        var valueDiff = objIdDiff.getAttribute("value");
        var msgDiff = 
            "【getElementById(diff)】\n" + objIdDiff + " = " + valueDiff
            + "\n\n<<value>>\n" + objIdDiff.value
            + "\n\n<<omake>>\n" + objIdDiff.omake
           + "\n\n【getElementsByName(diff)】\n" + objNameDiff + " = " + objNameDiff.value
            + "\n\n【collection】"
              ;
        
        for ( var i = 0 ; i < objNameDiff.length ; i++ ) {
            msgDiff = msgDiff + "\n<" + i + ">" + objNameDiff.item(i) + " = " + objNameDiff.item(i).value;
        }

        alert(msgDiff);

      }
    </script>
  </head>
  <body id="body" name="body" value="顔はヤメときな！">
    <form id="form" value="ふぉーむ">
      <span id="detail" name="detail" value="0" omake="こいつが読めるかい？">スパンだよ！？</span>
      <input id="" type="text" name="detail" value="1" />
      <input id="detail" type="text" name="detail" value="2" />
      <input id="diff_x" type="text" name="diff" value="nameがdiffです(1)" />
      <input id="diff" type="text" name="diff_x" value="idがdiffです(1)" />
      <input id="diff_x" type="text" name="diff" value="nameがdiffです(2)" />
      <input id="diff" type="text" name="diff_x" value="idがdiffです(2)" />
      <input type="button" onclick="hoge()" value="ほげ">
    </form>
  </body>
</html>