オブジェクトとは

まず最初に、前回に引き続きこちらの本を参考にさせていただいた。
岩田宇史「いちばんやさしいJavaScriptの教本」（インプレス）

オブジェクトとは・・・人によって様々な説明ができると思うが、自分はこう考えている。周辺の用語も含めて説明してみる。

オブジェクトとは「人」や「車」などの大雑把な「モノ」
クラスはオブジェクトの設計図
インスタンスはクラスによって具現化されたモノ
プロパティはインスタンスのプロフィール（「性別」や「車種」など）
メソッドはインスタンスの持つ行動パターン（「座る」や「走る」など）

時と場合によってはオブジェクトとインスタンスが同じ意味で扱われていたりするが、ここは実際にコードを記述しながら理解できれば良いと思う。

オブジェクトについての理解は、JavaScriptに限らずどの言語でも必要になるだろうが、今回はオブジェクトを中心として学んでいくので改めて確認をした。

JavaScriptのオブジェクト

JavaScriptではHTMLやCSSから要素を取得し、それをオブジェクトとして扱い様々な変更（プロパティの変更）を行うことができる。

オブジェクトは入れ子構造（ネスト）になっていて、Webページのトップにはwindowオブジェクトが君臨している。

そこからHTMLの構造であるdocumentオブジェクト、その下にelementオブジェクトや各要素（ノード）であるhead、body、pなどが広がっていく。これをDOM（Document Object Model）と言う。

HTMLの要素を扱う

要素の取得

まず、HTMLにテスト用のタグであるgreetingを記述する。

test.html

<body>
  <div id="greeting">
    <h1>こんにちは</h1>
  </div>
  <script src="js/app.js"></script>
</body>

次に、JavaScriptで先ほど記述したgreetingを取得する。documentオブジェクトのgetElementByIdメソッドを使用し、取得した結果をオブジェクトとしてelementに代入している。

console.dir関数を使用すると、コンソールに引数の詳細が表示されるので理解しやすい。

app.js

var element = document.getElementById('greeting');
// console.dir(element);

要素の変更

elementオブジェクトのinnerHTMLプロパティを上書きするという方法で、指定した要素の内容を書き替えることができる。

console.dir関数はオブジェクト名.プロパティの指定でも内容を取得できるので、参考に。

app.js

// console.dir(element.innerHTML);
element.innerHTML = "<h2>Hello!</h2>";

ちなみに<h2>のようなタグを、タグとしてではなく文字として扱いたい場合は、innerTextプロパティを使用する。

app.js

element.innerText = "<h2>Hello!</h2>";

要素の追加

要素を追加する時は、必ず親要素を指定しなければならない。今回はgreetingの子要素としてsecond_greetingとthird_greetingを追加する。

app.js

var second_element = document.createElement('div');
second_element.setAttribute('id', 'second_greeting');
second_element.innerHTML = "<h2>ニーハオ！</h2>";
// console.dir(second_element.innerHTML);
greeting.insertBefore(second_element, null);

var third_element = document.createElement('div');
third_element.setAttribute('id', 'third_greeting');
third_element.innerHTML = "<h2>グーテンターク！</h2>";
// console.dir(third_element.innerHTML);
greeting.insertBefore(third_element, null);

このような段階を経て、要素が追加される。

documentオブジェクトのcreateElementメソッドで作成したいタグを用意する。それをsecond_elementに代入し、オブジェクトとして扱う。
second_elementオブジェクトのsetAttributeメソッドでタグ内の属性名idと属性値second_greetingを指定する。
second_elementのinnerHTMLプロパティに記述したい内容を代入する。
親要素greetingのinsertBeforeメソッドで、第１引数に追加するsecond_elementオブジェクト、第２引数に追加する位置を指定する。
同様の手順でthird_greetingを追加する。

最後のinsertBeforeメソッドをgreeting.insertBefore(third_element, second_element);に書き替えれば、second_elementの前にthird_greetingが追記される。一番後ろに追記したい場合は、上記コードのようにnullを指定する。

insertBeforeメソッドではidであるgreetingを直に指定しているが、既存のタグは全てオブジェクト化されているということだろうか？（あらかじめgetElementByIdメソッドを使用しなくても良いのだろうか？）

要素の削除

最後に、<div id="second_greeting">を削除する。要素の追加と同様、この作業にも親要素の取得が必要だ。

app.js

var parent = second_greeting.parentElement;
parent.removeChild(second_greeting);

second_greetingのparentElementメソッドで親要素を取得し、parentオブジェクトとして扱う。
parentオブジェクトのremoveChildメソッドで削除したい子要素を指定し、削除を実行する。

ここでも、idであるsecond_greetingを直に指定している。代入によるオブジェクト化が必要な作業と、そうでない作業があるのだろうか？

気になったので、以下の記述でどうなるか実験してみた。

app.js

greeting.removeChild(second_greeting);

この一文でも同様の削除ができた。

親要素を直に指定しなかったのは、実際の作業では膨大なコードの中から指定した子要素の親要素を探すのが困難だから、あえてメソッドを使用してその手間を省いたのだろう・・・と思う。

CSSの要素を扱う

オブジェクトのstyleプロパティを使用し、さらにCSSのプロパティを指定することにより、その内容がHTMLに反映される。

CSSのプロパティはキャメルケース（font-sizeはfontSizeのように）にした状態で使用できる。

先ほどのidとオブジェクト云々から以下２通りの書き方を試したが、どちらも同じ結果になった。（文字の色が赤になり、50pxサイズになる。）

console.dir関数を使用しても、third_elementとthird_greetingはやはり同じ結果だった。

app.js

var third_element = document.getElementById('third_greeting');
third_element.style.color = "#FF0000";
third_element.style.fontSize = "50px";

app.js

third_greeting.style.color = "#FF0000";
third_greeting.style.fontSize = "50px";

結局アウトプットは１日で終わらなかった。基本書の読み込みは終了しているので、自分の中での学習は一応終了している・・・と信じたい。

最後はいよいよイベントだ。

今回はここまで。