JavaScriptによるDOM操作の基本

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

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

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

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

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

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

他にも、

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です