Webページに動きをつけるプログラミングを学ぼう！

また、HTMLはただのテキストデータなので、そのままではこれを実現することができません。そこで、DOM（Document Object Model）が登場します。DOMは、HTML文書の要素や属性などをオブジェクトとして扱うための仕組みであり、JavaScriptを使ってDOMを操作することで、Webページの構造や表示を自由に変更することができます。

DOMとは？

JavaScriptから操作できるHTML要素で、オブジェクトのことです。

HTMLはテキストデータですが、ブラウザの表示では、要素をツリー構造のデータとして扱います。

ブラウザはHTMLを読み込むと自動的に、DOMツリー（ツリー構造のデータ）を生成します。そうするとdocumentオブジェクトが使えるようになりDOMの操作が可能になります。

HTMLの要素のことをDOMではノードと呼びます。

テキストデータの要素とは違う形でこれを表現しています。

JavaScriptでは、このDOMを操作してWebページに動きをつけます。動きをつけたい対象のノードをDOMから取り出し、属性などを操作していきます。

画像を差し替えるような場合には、imgノードを取り出します。

オブジェクトとは？

DOMから取り出した要素は、4つのデータ型（文字列、数値、真偽値、オブジェクト）のうち、オブジェクトになります。

テキストデータの要素とは違う形でこれを表現しています。

例えば、このようなimgタグがあったとします。

画像のファイル名をsrc属性に指定しています。ファイル名を指定する部分をJavaScriptで表現すると、このようになります。

オブジェクトでは、.srcの部分をプロパティと言います。HTMLタグの属性は、プロパティになります。.srcや.altなどがそれにあたります。

「オブジェクト」と書かれた部分は要素全体を指しており、この例ではimgタグ全体を指しています。書式は正しくありませんが、このような表現がふさわしいかもしれません。

実際にはこの部分に変数名を書きます。imgノードを事前に変数に代入しておきます。

ブラウザに表示されているページの中から特定のノードを取得して、変数に代入して使います。DOMノードを取得して変数に代入し、それを使用します。そのやり方を説明していきたいと思います。

要素の取得方法

要素を取得する命令文はいくつかあるのですが、ここでは、そのうち3つを説明したいと思います。

getElementById

documentオブジェクトのgetElementByIdという命令文を実行します。引数にはid属性の値を指定します。

HTMLドキュメントから、1つだけあるはずの要素を取り出して、変数elemに代入しています。

querySelector

同様に、documentオブジェクトのquerySelectorという命令文を実行します。

引数にはスタイルシートを適用する時に使った「セレクタ」を指定します。id属性の場合は#id名、class属性の場合は.class名になります。該当する要素が複数あった場合には、先頭の要素のみを取得して、変数に代入します。

querySelectorAll

documentオブジェクトのquerySelectorAllという命令文を実行します。

引数にはセレクタを指定します。セレクタに該当する全ての要素を取得するという命令文です。代入された変数elemsは要素の配列になります。

これらの操作で取得したオブジェクトのプロパティ、つまりHTMLの属性などを操作して、要素に動きをつけます。srcプロパティやstyleプロパティなどを使って要素に変化を与えることができます。

オブジェクトについての補足

参考までにですが、前述のimg要素のsrcプロパティに画像ファイルを指定するJavaScriptを、さらに違う表現で書くと以下のようになります。

srcというattribute（src属性）に画像ファイル、”dog.jpg”をsetしています。

このsetAttribute()の部分をメソッドと言います。

オブジェクトは、

プロパティ

メソッド

によってHTMLの要素をテキストデータとは違う形で表現することができるのです。

オブジェクト型のデータは、プロパティやメソッドをドット表記で書きます。.srcや.setAttribute()の部分です。丸括弧がついているものがメソッドで、ついていないものがプロパティです。

今まで使ってきた、はメソッド、配列のはプロパティだった、ということになります。

プロパティの操作

プロパティの操作例を解説をしていきたいと思います。

srcプロパティの操作

img要素の画像を差し替えるような時に使います。.srcプロパティにファイル名を代入することで、表示している画像ファイルを変更することができます。

具体例を見てみましょう。

例えば、犬の画像を表示しているHTMLタグがあったとしましょう。

idはdogとなっています。この要素をgetElementByIdで取得して、変数elemに代入しています。

この時に変数elemのデータ型はオブジェクト型になります。オブジェクト型になったので、ドット表記でプロパティを操作できるようになり、.srcの画像ファイル名をcat.jpgに書き換えています。

書き換える前には犬の画像が表示されていますが、

スクリプトを実行してsrcプロパティに値を代入すると、画像が猫に変わります。

innerHTMLプロパティの操作

要素の中身を書き換えることができます。開始タグと終了タグの間に挟まれている文章の事です。値を代入すると、要素の中身（Content）を書き換えることができます。

具体例を見てみましょう。

このようなp要素があったとします。idはmsgとなっています。

これをgetElementByIdで取得して、変数elemに代入しています。この時に変数elemはオブジェクト型になりますので、.innerHTMLプロパティを使って中身を書き換えています（例えば、メッセージの出力などです）。

書き換える前には「ようこそ！Webの世界へ」と表示されています。

スクリプトを実行して値を代入すると、中身が「メッセージを変更」に書き換わります。

この時、HTMLタグを含んだ文章なども代入することができます。

これにより、豊かな表現が可能です。中身を書き換えた結果を見てみると、

strongタグで強調されて太字になっています。

styleプロパティの操作

要素内スタイルシートで使った、HTMLタグのstyle属性のことです。

styleプロパティは、CSSで指定することのできるプロパティを持っています。このプロパティを操作して要素の見た目を変更していきます。

例えば、displayをnoneにして非表示にしたり、

font-sizeを大きな値にして目立つようにするなどです。

プロパティの操作の仕方を見ていきましょう。値を代入します。

この「オブジェクト」の部分が、ページ内のどの要素かを指していて、の後ろのの部分が何のスタイルに対応するかを示しています。CSS のプロパティに相当します。”値”の部分がそれをどのように変化させるかを示しています。

「どこの、何を、どうする」という書式です。スタイルシートと同じです。

具体例を見てみましょう。前述の例と同じように、id属性がmsgというp要素があったとします。

getElementByIdで取得して、変数elemに代入しています。

この時に変数elemはオブジェクト型になりますので、プロパティにを代入して文字色を赤にすることができます。

変更前の状態は、青文字になっています。

変更後には赤になりました。

このようにしてスタイルのプロパティを操作できるので、Webページに様々な変化を加えることができます。

サンプルコード

要素を取得する3つのメソッドをすべて使用しています。それぞれの使い方の違いや取得結果の操作の違いを意識して、より理解を深めるようにしていきましょう！

DOMを操作してWebページに様々な変化を加えることができました。後は、適切なプロパティと設定する値を変えることで様々な動きに応用することができます。DOMの操作には、HTMLの文書構造の理解とCSSのプロパティの知識が必要です。試行錯誤しながら動きをつけるJavaScriptに慣れていってください。

関数

イベント