javascript - DHTML概要 - liguofeng29’s blog

DHTMLは、DOM(Document Object Model)前の動的にHTMLを変更する技術である。

DHTMLのモデル関連

window : javascriptのトップオブジェクト。
- navigator : ブラウザ
- frames
- location : ページURL
- hisotry : 履歴
- document : HTML
  - all
  - body
  - forms
  - anchors
  - links
  - images
- screen : ディスプレイ

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> DHTML </title>
</head>

<body id="body1">
    <a href="http://www.google.co.jp">google</a>
    <br />
    <img id="logo" src="logo.jpg" alt="logo" />
    <br />
    <form>
        <input type="text" name="user" value="テキスト1111" />
        <br />
        <input type="button" id="bn" value="ボタン1111" />
    </form>
    <script type="text/javascript">
       document.write("----------各要素取得----------<br>");
        // bodyのid
        document.write(document.body.id + "<br>");
        // 1個目のlink
        document.write(document.links[0].href + "<br>");
        // ID OR name = logoのイメージ
        document.write(document.images["logo"].alt + "<br>");
        // 1個目のフォーム
        form = document.forms[0];
        document.write(form.innerHTML + "<br>");
        // フォームの1個目の要素値
        document.write(form.elements[0].value + "<br>");
        // id Or name = btの値
        document.write(form.elements["bn"].value + "<br>");
        // id Or name = btの値
        //document.write(document.all["bn"].value + "<br>");
    </script>
</body>

</html>

f:id:liguofeng29:20160212224516p:plain