デイトラ中級Day3 : DOM操作
chapter1 : DOM操作とは
DOM(Document Object Model)操作とは、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことを言います。
Webブラウザは、Webサーバから受け取ったHTMLを解析し、DOMと呼ばれるデータ構造に変換。そしてCSSを解析して得られたスタイルをDOMに紐づけてレイアウトが計算され、最終的にユーザーの画面に表示されます。
簡単に表現するとこんな感じ。
HTML
↓
DOM
↓
画面に表示
で、DOM操作ではJavaScriptを使ってDOMにアクセスし直接その内容を書き換えられるんです。
簡単に表現するとこんな感じ。
HTML
↓
DOM ← JavaScript
↓
画面に表示
説明が簡易的なので、ちょっと何を言ってるか分からないという方は以下の記事を見てみてください。
chapter2 : jsFiddleを使ってみよう
jsFiddleとは、HTML / CSS / JavaScriptのコードを簡単に実装することができて、かつその動作を簡単に確認できるWebサービスです。
HTMLのエディタを見て、CSSのエディタを見て、JSのエディタを見て、Webブラウザで挙動を確認して、など作業工程が増えれば増えるほど画面の数も多くなりなにかと面倒です。
でもjsFiddleを使えばそれぞれ4分割にされたものがひと画面に表示されるのでだいぶ見やすくなります。
実際の画面はこんな感じです。
会員登録も不要で無料で使うことができます。
詳しい使い方については以下のサイトを見てみてください。
ちなみに、動的な動きをつけることができるJavaScriptですが、基本的なイベント処理の作り方は覚えておいた方が良さそうなので、基本が抑えられたいい感じの記事をシェアしときますね。
それでは今回はこの辺で終わりにします。
ありがとうございました。
けけまる