バリケンのJavaScript日記 RSSフィード

2006-11-08

[] DOMの要素を変更する  DOMの要素を変更する - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  DOMの要素を変更する - バリケンのJavaScript日記  DOMの要素を変更する - バリケンのJavaScript日記 のブックマークコメント

昨日の続きだよ。まずはとりあえずHTMLを書かないとね。例のごとく「Hello, world.」を表示するHTMLを書いてみよう。まずはテキストエディタを立ち上げて、htmlタグから書き始めるよ。

<html>
</html>

次にheadタグbodyタグを追加するよ。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

表示されるのはbodyタグの部分だから、ここに「Hello, world.」と書けばいいよね。

<html>
  <head>
  </head>
  <body>
    Hello, world.
  </body>
</html>

じゃあ、いったんhello.htmというファイル名で保存して、ブラウザで表示してみよう!ちゃんと「Hello, world.」って表示されたよね?

次は、この「Hello, world.」を「ページの遷移なしで」変更してみるよ。まずは「変更したい部分」をひとまとまりにするために、divタグで囲むよ。

<html>
  <head>
  </head>
  <body>
    <div>Hello, world.</div>
  </body>
</html>

次に、divタグid属性をつけて、JavaScriptから簡単に参照できるようにするよ。

<html>
  <head>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

じゃあ、いよいよJavaScriptコーディングをするよ。JavaScriptコードscriptタグで囲む必要があるから、まずはscriptタグを追加するよ。scriptタグ記述するのはheadタグの中がいいみたい。

<html>
  <head>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

Hello, world.」を変更する関数changeWorldを書いてみるよ。

<html>
  <head>
    <script type="text/javascript">
      function changeWorld() {
      }
    </script>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

DOMオブジェクトは、とくになにも宣言しなくてもdocumentという変数を使って参照できるよ。さらに便利なことに、DOMオブジェクトにはあらかじめ便利なメソッドがいくつか定義されているよ。

DOMオブジェクトから特定の「要素オブジェクト」を取り出すには、getElementByIdメソッドを使うみたい。引数には、さっきdiv要素に追加したidを指定するよ。

<html>
  <head>
    <script type="text/javascript">
      function changeWorld() {
        var helloElement = document.getElementById("hello");
      }
    </script>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

「要素オブジェクト」にも、やっぱりあらかじめ便利なメソッドがいくつか定義されているみたい。さっき取り出した「要素オブジェクト」の内容を書き換えるには、replaceChildメソッドを使えばいいみたいだよ。

<html>
  <head>
    <script type="text/javascript">
      function changeWorld() {
        var helloElement = document.getElementById("hello");
        helloElement.replaceChild();
      }
    </script>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

replaceChildメソッドを使って要素オブジェクトの内容を置き換えるには、「新しい要素オブジェクト」と「古い要素オブジェクトの場所」を順番に引数で指定してあげればいいみたい。「新しい要素オブジェクト」はcreateTextNodeメソッドで作って、「古い要素オブジェクトの場所」はchildNodesプロパティ(これは配列だよ)で指定するよ。

<html>
  <head>
    <script type="text/javascript">
      function changeWorld() {
        var helloElement = document.getElementById("hello");
        helloElement.replaceChild(document.createTextNode("Change the world!"),
                                  helloElement.childNodes[0]);
      }
    </script>
  </head>
  <body>
    <div id="hello">Hello, world.</div>
  </body>
</html>

これでchangeWorld関数ができたけど、何らかの方法で呼び出さないとね。じゃあ、要素をクリックした時にこの関数が呼び出されるように、divにonclick要素を追加するよ。

<html>
  <head>
    <script type="text/javascript">
      function changeWorld() {
        var helloElement = document.getElementById("hello");
        helloElement.replaceChild(document.createTextNode("Change the world!"),
                                  helloElement.childNodes[0]);
      }
    </script>
  </head>
  <body>
    <div id="hello" onclick="changeWorld()">Hello, world.</div>
  </body>
</html>

じゃあ、hello.htmという名前で保存したら、ブラウザで開いて試してみよう!「Hello, world.」をクリックすると「Change the world!」に変わることを確認してね。