サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第2回 Javascript編②　―DOM―

どーも。新人です

突然ですが、
『サイテックのゆきんこさん。』

『サイテックの社員の中の女性の中のエンジニアの方。』

どちらで呼ばれても私のことですが、、
前者は確実簡単という感じ。。
後者はいろんな要素を辿ってる感じがしますね。


今回はJavascriptには欠かせないDOMについてです。

DOM…
webページを、分解した小さな断片データ（=ノード）の
階層ツリーに見立てたものといったところでしょうか。

DOMではwebページにあるすべてがノードであり、
ページの変更はノードの変更ということです。

これを使えば、ノードを辿ることで、ページ内のどんな情報にも
アクセスできます。


HTML要素にアクセスする方法としてはinnerHTMLプロパティがよく使われますね。

    <div id = "greet">
        <p>おはよう！</p>
    </div>

上記の"おはよう!"を"こんにちは！"に置き換える場合

    ①document.getElementById("greet").innerHTML = "<p>こんにちは!</p>";

とすれば簡単に実現できます。

しかし、このinnerHTMLはちょっとくせ者で、
元々はIE独自の機能で、今では他ブラウザも採用していて一般的ですが、
現在も非標準のままのプロパティです。

その証拠に<table>や<select>下の要素をinnerHTMLで変更しようとすると、
IEでは「未知の実行時エラー」が発生してしまいます。

そこで①と同じことをDOMを使ってやると、

    ②
    var node = document.getElementById("greet");
    while(node.firstChild)
        node.removeChild(node.firstChild);
    node.appendChild(document.createTextNode("こんにちは!"));
    
１．あるノードの子ノードをループさせて、最初の子ノードがなくなるまで削除する。
２．新しいテキストノードを作成する。
３．作成したテキストノードを子ノードとして追加する。

DOMを使うとより細かなコントロールが可能になりますが、
見てわかる通り②は①に比べて複雑ですね。

こういったブラウザ間の互換性問題を吸収し、
複雑な処理をまとめてくれているのがprototype.jsやjQuery.jsを代表とする
Javascriptのフレームワーク/ライブラリです。

上記の置き換え処理に関して言えば、
$(#greet).html("こんにちは!");          //prototypeの場合
$(#greet).update("こんにちは!");      //jQueryの場合
    
と書くだけで実現できます。
素晴らしいですね☆

簡単すぎてDOMの存在を忘れてしまいそうになりますが、
中には②の流れがあることをちゃんと理解した上で使っていきたいなと思いました。

今回は以上です。