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

2006-11-09

[] もうちょっと簡単にDOMの要素を変更する  もうちょっと簡単にDOMの要素を変更する - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  もうちょっと簡単にDOMの要素を変更する - バリケンのJavaScript日記  もうちょっと簡単にDOMの要素を変更する - バリケンのJavaScript日記 のブックマークコメント

昨日の続きだよ。

昨日のさいごの状態のhello.htmは、次のような感じだったよね。

<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>

でもなんだかややこしいよねえ。もうちょっと簡単にならないかな?ということで、まずはややこしそうなreplaceChildメソッドの部分をどうにかしようと思うよ。

実は「要素オブジェクト(ここではhelloElement変数で参照する)の内容をHTMLであらわしたもの」は、innerHTMLプロパティで参照したり書き換えたりすることができるみたいだよ。つまり、

helloElement.replaceChild(document.createTextNode("Change the world!"),
                          helloElement.childNodes[0]);

は、

helloElement.innerHTML = "Change the world!";

のように書けるんだって。じゃあ、書き直してみよう!

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

そしてさらに

var helloElement = document.getElementById("hello");
helloElement.innerHTML = "Change the world!";

と書いていたけど、helloElement変数を使わなくてもメソッドチェーンを使えば次のように一行で書けそうだよね。

document.getElementById("hello").innerHTML = "Change the world!";

じゃあ、書き直してみよう!

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

そしてさらにさらに、prototype.jsを使うと「document.getElementById("hello")」を「$("hello")」って書けるみたいだよ!すごいシンプル

prototype.jsを使うには、次のようにscriptタグで読み込んであげればいいみたいだよ。

<script language="JavaScript" type="text/javascript" src="prototype.js">
</script>

じゃあ、以上を踏まえて書き直してみるね。

<html>
  <head>
    <script language="JavaScript" type="text/javascript" src="prototype.js">
    </script>
    <script type="text/javascript">
      function changeWorld() {
        $("hello").innerHTML = "Change the world!";
      }
    </script>
  </head>
  <body>
    <div id="hello" onclick="changeWorld()">Hello, world.</div>
  </body>
</html>

うん、changeWorld関数の中身はずいぶんすっきりしたよね。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061109