デイトラ中級Day3 : DOM操作

chapter1 : DOM操作とは

DOM(Document Object Model)操作とは、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことを言います。

Webブラウザは、Webサーバから受け取ったHTMLを解析し、DOMと呼ばれるデータ構造に変換。そしてCSSを解析して得られたスタイルをDOMに紐づけてレイアウトが計算され、最終的にユーザーの画面に表示されます。

簡単に表現するとこんな感じ。
HTML
↓
DOM
↓
画面に表示

で、DOM操作ではJavaScriptを使ってDOMにアクセスし直接その内容を書き換えられるんです。

簡単に表現するとこんな感じ。
HTML
↓
DOM ← JavaScript
↓
画面に表示

説明が簡易的なので、ちょっと何を言ってるか分からないという方は以下の記事を見てみてください。

JavaScript超基礎講座！DOM操作を学ぶ | Hypertext Candy

chapter2 : jsFiddleを使ってみよう

jsFiddleとは、HTML / CSS / JavaScriptのコードを簡単に実装することができて、かつその動作を簡単に確認できるWebサービスです。

HTMLのエディタを見て、CSSのエディタを見て、JSのエディタを見て、Webブラウザで挙動を確認して、など作業工程が増えれば増えるほど画面の数も多くなりなにかと面倒です。

でもjsFiddleを使えばそれぞれ4分割にされたものがひと画面に表示されるのでだいぶ見やすくなります。

実際の画面はこんな感じです。

会員登録も不要で無料で使うことができます。
詳しい使い方については以下のサイトを見てみてください。

簡単にコードを実装してシェアできる！超便利なjsFiddleの使い方

ちなみに、動的な動きをつけることができるJavaScriptですが、基本的なイベント処理の作り方は覚えておいた方が良さそうなので、基本が抑えられたいい感じの記事をシェアしときますね。

【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！ | 侍エンジニアブログ

それでは今回はこの辺で終わりにします。
ありがとうございました。
けけまる