JavaScriptのDOMについてざくっと解説
ryojiWEBサイトも結構出来てきたでござる。そろそろ、WEBサイトをいろいろ動かしたいでござるな。例えば、ボタンをクリックしたら「シュッ」って感じで動いてほしいでござる。
では、JavaScriptでも使って組み込めばいいと思いますよ。
ふむ。では勉強を・・・。ん？このDOMってなんでござるか？確か機動戦士ガンダムにいたような・・・。
それはドムですね。では、今回はDOMについてざくっと解説しましょう。
目次
DOM(Document Object Model)
まず、DOMを使うとHTML（CSSもですが）の文書を読み取ったり、変更したり、追記したりできます。
ふむ？でも、それって普通にプログラミングして、HTMLに書けばいいでござるよね？
すいません。言葉足らずでした。「動的に」操作したい時にDOMを使います。
このような操作をマウスクリック時や入力フォーム時などで動作させることもできます。
ふむふむ。HTMLだけでは動作できない、利用者のブラウザ操作に合わせて動作させることもできるんでござるな。
こんな時にDOMを使う
じゃあ、具体的にDOM操作はどんな時に使うでござるか？
そうですね。例えば以下のようなときに利用します。
- 要素スタイルの変更
→バックグラウンドカラーを変えたり、フォントの大きさを変えたり。ユーザーの見えやすいWEBページのための工夫として使います。 - 要素の追加・削除
→必要ない要素を消したり、利用者の入力内容から入力フォームを追加で表示してあげたりします。 - 利用者の動作に応じた操作
特定のHTML要素でクリックやマウスホバー時に動作させるときにも、DOM操作でHTML要素を認識したりします。
操作をしていて、色んな動きをしているWEBサイトであれば高確率でJavaScript（もしくは関連技術）を使っていることが多くありますよ。
ふむ。じゃあJavaScriptを極めれば、拙者のHPも超おしゃれになるでござるな。
JavaScriptdeで画像スライダーを自作
そういえば、最近、私は画像スライダーをJavaScriptで自作してみてるんですよ。これもDOM操作を行っています。
（作成途中で恐縮です。最終的には左右に移動したときにアニメーションを付けたり、下の小さい〇ボタンの動作もするように改修中です。）
ほーん。なんかショボいでござるね。
（イラッ）
世の中には、JavaScriptのプラグインで無料で上質な画像スライダー機能が沢山配布されています。そういうのを使うのもいいですが、DOMを学ぶためにも、自学習で自作するのも結構楽しいですよ！
よーし。拙者のHPをどんどんスタイリッシュにするでござる！
