読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

javascript - DHTML概要

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