DOMの基本操作

JavaScriptのwindowオブジェクトとdocumentオブジェクト

JavaScriptのDOMを操作するためのオブジェクトは階層構造で管理されており、その最上位にあるオブジェクトがwindowオブジェクトであり、JavaScriptが起動するタイミングで自動的に生成されます。

JavaScriptのwindowオブジェクトとdocumentオブジェクトの関係ですが、ドキュメントを表示するウィンドウに対応するのがWindowオブジェクトで、HTMLドキュメントに対応するのが documentオブジェクトになります。

例えばダイアログボックスを表示するのはWindowオブジェクトの機能(メソッド)であるwindow.alert(“ダイアログメッセージ”);で行ないますが、HTMLページ中に文字を出力させるにはdocument.write(“テキスト”);で行ないます。

DOMにより生成されるエレメントオブジェクト

サーバーから送られるHTMLをブラウザが描画(rendering)してWEBサイトが見られるわけですが、ブラウザがHTMLのタグに対応するオブジェクトを生成する機能がDOM(Document Object Model)であり、ブラウザのDOMはJavaScriptに操作してもらうために存在するとも言えます。

<html>
  <head>
    <title>Launch IT at JKT</title>
  </head>

  <body>
    <div>ブロック1</div>
    <div>ブロック2</div>
  </body>
</html>

<html>~</html>がdocumentオブジェクトであり、そのプロパティとして<body>~</body>がありdocument.bodyでアクセスします。

そしてbody内のタグにはDOMの機能によって対応するエレメントオブジェクトが生成されます。

エレメントの参照


DOMはNodeインターフェイスというツリー構造のインターフェイスを装備しており、JavaScriptはNodeを通じてDOMにアクセスします。Nodeインターフェイスの最上位がhtml要素から生成されるdocumentオブジェクトです。

HTMLタグはDOMによりオブジェクト化されていますがこれらをエレメントと呼び、getElementByIdやgetElementsByName(引数のnameのDOMオブジェクトを配列を返す)のようにid属性やname属性を指定することでエレメントのオブジェクトにアクセスします。

<html>
  <head>
    <script type="text/javascript">
      function show(){
        var txt = document.getElementById("txt1");
        txt.innerHTML = "やま";
      }

      function doKlik(){
        var txt2 = document.getElementById("txt2");
        var rd = document.getElementsByName("rad");
        for(i=0; i<rd.length; i++){
          var rd_array=rd[i];
          if(rd_array.checked){
            alert(txt2+rd_array.value);
          }
        }
        alert(txt2);
      }
    </script>
  </head>

  <body onload="show();">
    <div id="txt1"></div>

    <form onsubmit="return false;">
      <input type="text" id="txt2">
      <input type="radio" id="rd1" name="rad" value="male">
      <input type="radio" id="rd2" name="rad" value="female">
      <input type="button" onClick="doKlik();" value="Click">
    </form>

  </body>
</html>

エレメントの更新

HTMLタグの場合、style属性を定義することで表示を変化させますが、エレメントオブジェクトのstyleプロパティを変更することで、関数からこれを実行することができます。

getElementByIdメソッドで該当エレメントへの参照を取得し、styleプロパティを変更します。ちなみにプロパティは資産とか土地とか所有物という意味でオブジェクトの所有物を表します。

<html>
  <head>
    <script type="text/javascript">
      function doklik(){
        var txt=document.getElementById("back");
        txt.style.background="#999";
        
      }
    </script>
  </head>
  <body>
    <div id="back">Backgoround</div>
    <input type="button" onClick="doklik();" value="OK">

  </body>
</html>

エレメントの追加

createElementメソッドで空のdivエレメントオブジェクトを作成して、innerHTMLメソッドで空のdivエレメントに表示する数字を設定して、appendChildメソッドで作成したエレメントをHTML中のid属性countの場所に表示します。

<html>
  <head>
    <script type="text/javascript">
      var cnt=1;
      function doKlik(){
        //divエレメントオブジェクトの作成
        var obj=document.createElement("div");

        //表示する数字を設定
        obj.innerHTML=cnt;
        cnt++;
        
        //作成したdivエレメントにappendChildにてobjオブジェクトを組み込むことで表示される。
        var num=document.getElementById("count");
        num.appendChild("obj");
        
      }
    </script>
  </head>

  <body>
    <div id="count"></div>
    <input type="button" onclick="doKlik();" value="OK">

  </body>

</html>

エレメントの削除

getElementIdで該当idエレメントへの参照を取得し、lastChildプロパティで最後の子要素を取得し、removeChildメソッドで該当エレメントを削除します。

<html>
  <head>
    <script type="text/javascript">
      function doRemove(){        
        //親要素countへの参照を取得
        var num=document.getElementById("count");

        //lastChildプロパティで最後の子要素を取得
        var obj=num.lastChild("obj");
        if(obj){
            //子要素が存在する場合、該当要素を文章から削除
            removeChild(obj);
        }
      }
    </script>
  </head>
 
  <body>
    <div id="count"></div>
    <input type="button" onclick="doRemove();" value="Remove">
 
  </body>
 
</html>