JavaScriptによるDOM操作の基本

前回がサーバー側言語のPHPだったので、目指せ毎日更新シリーズ第2弾はフロント側言語のJavaScriptで書いてみる。

JavaScriptを使う主な目的はずばり、動的にHTMLを操作することなわけだが、その基本的なやり方を15分で書ける分でまとめてみようと思う。

HTMLをいじるにはDOMというものを扱う必要があるのだが、DOMとは何かの説明自体はこちらを見てもらうとして、では具体的になにをやるのかを簡単に説明してみる。

一番簡単な例として、あるIDを持つタグに対する入出力を考えてみる。

<div id="hello">
・・・・・・
</div>

これを取得するには次のようにすればいい。

<script>
    var hello = document.getElementById("hello");
</script>

1つのHTMLファイルに対して同じIDを持つタグは1つしか取れないので、タグの中身がhelloに入ることになる。
このタグの中に、例えば「こんにちは」というテキストを入れたいときは、次のようにする。

<script>
    document.getElementById("hello").textContent = "こんにちは";
</script>

他にも、

<script>
    document.getElementById("hello").style.color = "#0000ff";    //#0000ffは青を表す
</script>

とやれば文字の色が青くなるという風に、スタイルを変えたりすることもできる。
それ以外にもdocument.getElementById(“hello”).innerHTMLにhtmlタグを入れれば取得したIDの要素の中にHTMLを入れることもできる。
後は下のようにdocument.createElementでタグを生成してそれにテキストを入れて、appencChildで取得した要素の子要素として入れることもできる。

<script>
    var label = document.createElement("label");
    label.textContent = "おはよう";
    document.getElementById("hello").appendChild(label);
</script>

ID以外にも、クラスとかも取得することができる。

<script>
    var dogs = document.getElementsByClassName("dog");
</script>

とやれば、dogクラスを持つタグを取得できる。クラスはIDと違って複数あるので、document.getElementsByClassNameで取得した返り値は配列になることに注意。
他にも、document.getElementsByTagNameだと同じタグ名の要素を全て取得できる。

本当はjQueryを使ったりするともっと簡単にできるんだけど、それについては別の機会にやろうかと。
JavaScriptだと、DOM操作のほかにもイベント処理とかもどっかの機会に紹介しておきたいなあ。