JavaScriptを書く

    //main.js
    <script src="js/main.js"></script>
        window.onload=function(){
            //</html>までが終わった段階で自動的に動く
        }
        function fc(){
            //イベントが起きた時に動作する
            //<body>〜</body>の中
            <input type="button" onClick="fc()" />
        }

DOMツリー

DOMツリーって？

DOM（Document Object Model）

HTMLドキュメントの構造を記述するもので、これを使ってブラウザとのやり取りを行い、表示をコントロールする。

DOMのgetメソッド

tx=document.body.from.input.value;

DOMの一群には「getメソッド」が用意されており、これによりHTML要素を素早く指定することができる。(よく使われる一例。)
ただし、idなので一つ一つ指定しなければならない。

idを使った時

tx=document.getElementById("tx1");

classを使った時

        <form〜>
            <input type="text" id="tx1" class="c1" />
            <input type="text" id="tx2" class="c1" />
    </body>
</html>

classを使った場合は一気に取得できる。(c1を指定)

tx=document.getElementsByClassName("c1");
                        tx[0]→id="tx1"
                        tx[1]→id="tx2"

inputを指定

tx=document.getElementsByTagName("input");

これらを使ってgetmethod

<input type="text" id="tx1" class="c1" name="c1" />
<input type="text" id="tx2" class="c1" name="c1" />

tx=document.getElementsByName("c1");

ツリー状に展開

ドット(.)で繋ぐことで使用できる。(inputを入れなくて良い)

input   type
        value
        id
        name
        size
        style //<input type="text" style="height:15px;" />

textboxをターゲットとする時,プログラムが動くとボタンになる。

(ex)
document.getElementById("tx1").type="button";

                    .id="tx3";
                    .size="50";
                    .style.スタイルシートのプロパティを書く=値+"単位";

ボタンを押すとtextboxの左余白が150pxになる

document.getElementById("tx1").style.left="150px";

ボタンを押すと文字色が緑になる

document.getElementById("tx1").style.color="green";

background-imageのような時マイナスと認識されないために

document.getElementById("tx1").style.backgroundImage="images/p1.png";