Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
入門編

トップページ
JavaScript入門編 - id名で要素を特定してその属性を操作してみよう

id名で要素を特定してその属性を操作してみよう

みなさまどうもこんにちは。

続いてJavaScriptからHTML要素を取得して色々操作してみましょう。

まずはid属性から要素を特定してデザインを変更してみます。id属性についてはCSSで使ったことあるかと思います。あれを使います。

まずはHTMLをかきかきします。

<p id="test">初めてのJavaScript勉強中だよ！</p>

適当にp要素を書いてid名に『test』とふってみました。

こちらをJavaScriptで色々操作してみます。

JavaScriptでHTML要素を操作する際は最初に要素を特定して取得する必要があります。というわけで取得するところから始めましょう。

JavaScriptでid名から要素を特定して取得できるとっても便利なメソッドは『document.getElementById()』というメソッドです。すんごくよく使います。

ちょっと名前が長ったらしいですね。面倒くさいですね。

大変心苦しいのですがJavaScriptの関数とかメソッドは全部こんな感じです。ちょっとタイピングが面倒くさいですが頑張ってください。特に大文字小文字が入り交じっていますので最初の頃は打ち間違いをしてしまうことが多々あると思います。タイピングミスには注意してください。

JavaScriptでは『関数』と『メソッド』というものが存在します。

JavaScriptでの関数とはある決まった値を与えたり与えなかったりしたときに何らかの処理を行う演算式のことを指します。数学でいうと計算式のようなイメージです。そんでもってオブジェクトの中に関数を代入したりするとメソッドとなります。メソッドも関数の一つの種類になります。

ちょっとややこしい感じがするかもしれませんが、本質的には同じものなのであんまり意識しなくても大丈夫です。ちなみに他のプログラム言語でも関数とメソッドが混在している場合がありますが、その定義は言語によって多少違いがあります。そこはご注意ください。

あ、読み方ですが仕事場での会話などでは「どきゅめんと」は省略されて「げっとえれめんとばいあいでぃー」って呼ばれますね。

では記述してみましょう。今回はインラインで記述していきたいと思います。先ほどのp要素と一緒に記述した以下のHTMLファイルを用意してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript練習中！</title>
</head>
<body>
<p id="test">初めてのJavaScript勉強中だよ！</p>

<script>



</script>
</body>
</html>

まずscript要素の中に『document.getElementById();』と記述してみてください。このような感じですね。大文字小文字が混じっているので間違いないよう気をつけてください。

<script>

document.getElementById();

</script>

そしたら『()』の中に『"』か『'』で囲ったid名を記述します。今回は『test』というid名の要素を特定したいので『"test"』となりますね。こんな感じです。

<script>

document.getElementById("test");

</script>

できましたでしょうか？

とりあえずこれでHTML要素の取得はOKです。しかしこの状態でブラウザで実行しても取得しているだけなので今のところは何も起こりません。

試しにブラウザで表示してみてください。何も変化ありませんね。

じゃあここで要素がちゃんと取得できているかアラート関数を使って確認してみましょう。

アラート関数に括弧がくっついていましたよね、あれで『document.getElementById("test")』を大きく囲ってしまってください。こんな感じです。『;』は文の終わりに付けるものなので『alert(document.getElementById("test");)』としてしまわないように気をつけてくださいね。

<script>

alert(document.getElementById("test"));

</script>

ちょっと括弧だらけになってしまってよく分からなくなってしまったかもしれませんが頑張りましょう。プログラムコードってこんな感じになること多いです。

さて、これを実行させてみると

こんなアラートダイアログがでてくればバッチリオッケーでございます。

JavaScriptの世界では、ほぼ全ての物事はオブジェクトというまとまりで構築されています。前の記事でもちょいちょいオブジェクトって単語が登場していますね。オブジェクトとは、日本語で直訳すると『物』です。オブジェクトについての概念はちょっと難しいので細かい説明は先の記事でやりますね。

アラート関数でオブジェクトを表示させた場合は細かな中身は表示されません。なので先程のように『[object HTMLParagraphElement]』と表示されれば完璧です。

さて、無事に取得はできているようですがアラート関数の『[object HTMLParagraphElement]』だけではちゃんと要素が取得できてるのかちょっと心配ですね。では続いてコンソールログ関数を使ってみましょう。コンソールログ関数ならばオブジェクトの中身もしっかり表示することができます。

では先ほどと同じように『console.log()』の括弧の中に『document.getElementById("test")』をつっこんでみましょう。アラート関数の時と同じく『;』の位置にはご注意ください。

<script>

console.log(document.getElementById("test"));

</script>

括弧だらけになっちゃっていますが無事書けましたでしょうか。そしてコンソールを開いてみてこういう感じで表示されればバッチリでございます。

p要素がしっかり取得できていますね。このようにコンソールログ関数ならば要素を細かく表示することができます。要素をちゃんと取得できているか確認するときはアラート関数よりもコンソールログ関数の方が便利です。

ちなみに『document.getElementById()』で指定されている要素が見つからならなかった場合は『null』という値が返ってきます。これ、先の記事で出てくるのでなんとなく覚えておいて下さい。

というわけで問題なく要素が取得できているので、これにもういっちょ追記してちょっと要素をいじってみましょう。

ではこの要素を赤文字に変更してみましょう。

インラインで文字色を赤色に変更するにはその要素のstyle属性に『color: red』と記述すればOKでしたね。これをJavaScriptで行ってみましょう。

まず先ほどの『document.getElementById("test")』にさらに『.style』をくっつけます。『.』を忘れないようにしてくださいね。これをコンソールログ関数を使って中身をみてみましょう。

<script>

console.log(document.getElementById("test").style);

</script>

するとこのように表示されます。

一体これはなんだろう、というお話ですがこれはこのp要素のstyle属性のプロパティ一覧になります。

プロパティとはオブジェクトのまとまりの中の要素、というような感じです。そしてプロパティに入っている数値や文字列を『値』と呼びます。これはCSSと同じですね。

例えば『.length』なんかも配列のプロパティになります。ちょっと概念が難しいので今は細かい解説は割愛させていただきます。

※詳しくはこちらへ。

JavaScriptでのプロパティへのアクセス方法は『.』を記述したあとにプロパティ名を連結すればOKです。例えば配列『array』の『length』プロパティを取得したい場合は『.』を挟んで

array.length

となるわけです。

『▶』をクリックしてみましょう。するともういっちょ細かく中身を見ることができます。

ズラーっとstyle属性のプロパティと値が並びます。今はstyle属性に特に何も指定していないので『""』、つまり値なしになっていますね。

このように『.style』と記述するとその要素のstyle属性へアクセスすることができます。

そしてアクセスできればこっちのもの、でございます。ではこのままstyle属性の『color』プロパティを変更しちゃいましょう。

まず『color』プロパティへアクセスする場合は『style』プロパティのプロパティにアクセスする必要があるので『.style』の後にさらに『.color』を記述します。こんな感じですね。

<script>

document.getElementById("test").style.color;

</script>

そしたら『red』という値を代入します。こんな感じですね。

<script>

document.getElementById("test").style.color = "red";

</script>

これで『document.getElementById("test").style.color』に『red』という値が突っ込まれました。

ではブラウザを更新してみましょう。するとこのように文字色が変化していると思います。

ちゃんと変化してますでしょうか？変化していれば大成功です。ダメだったら記述にミスがないか確認してみてくださいね。大文字小文字は要注意です。

これがJavaScript経由でstyle属性を変化させる方法です。

これはつまりHTMLファイルに以下のように記述することと同意になります。

<p id="test" style="color: red;">初めてのJavaScript勉強中だよ！</p>

JavaScriptを使用してstyle属性を操作する場合の流れは、まず要素を取得しその後に『.』を挟んで『style』と追記してstyle属性へアクセス、続いて操作したいプロパティをさらに追記して『=』を使って値を代入させる、という流れです。

では練習がてらついでに背景色を黒色に変えてみましょう。背景色を変更する一般的なCSSプロパティは『background-color』でしたね。値は『black』になります。

さて、この『background-color』というプロパティはさっきの『color』と大きく違う点が一箇所あります。それは『-』(ハイフン)があるという事です。

さっきのJavaScriptの流れから考えるとこうなりますよね。

<script>

document.getElementById("test").style.color = "red";
document.getElementById("test").style.background-color = "black";

</script>

ところがどっこいこれでは動きません。

というのもこれまで勉強した中で算術演算子というものがありましたね。引き算で使う『-』の事です。『background-color』の中の『-』はプログラミングの世界では算術演算子になってしまうので、このように

document.getElementById("test").style.background-color;

としてしまうと
「『document.getElementById("test").style.background』から『color』を減算する」
という演算できない解釈をされてしまいエラーとなります。

ですので『background-color』プロパティへJavaScriptでアクセスする場合は『backgroundColor』となります。『-』の後の文字が大文字になっていることに注意してください。こんな感じですね。

<script>

document.getElementById("test").style.color = "red";
document.getElementById("test").style.backgroundColor = "black";

</script>

こうするとバッチリ黒背景になったかと思います。

全ての『-』付きのCSSプロパティは全てこのような書き直しを加えればOKです。『background-image』ならば『backgroundImage』というような感じですね。

要素を操作するときの記述方法はこのような感じになります。

さてここでまた応用技をご紹介します。今使ったid名から要素を取得したりするメソッド『document.getElementById()』ですが、こちらは実行させるたびに「要素を探して取得する」という演算をしています。ということは書く度にブラウザに探す処理をさせているのでちょっとPCに負担かけちゃっていますね。というわけでこの『document.getElementById()』を変数に入れてしまうのが一般的です。

というわけで少し書き直しましょう。

<script>
var elem = document.getElementById("test");

elem.style.color = "red";
elem.style.backgroundColor = "black";
</script>

変数『elem』に入れた場合はこんな感じになります。『document.getElementById("test")』の部分を丸ごと『elem』と置き換えてしまえばOKです。『document.getElementById("test").style.color = "red";』は『elem.style.color = "red";』となります。

これで少しだけPCの負担を軽くすることができます。

まあ最近のPCやスマホの処理速度からみると『document.getElementById()』ごとき一瞬で演算できてしまうので処理速度が大きく下がるなんてことは全くさっぱりありませんが、変数などにいれてしまうのが基本的なマナーになっていたりします。

というわけで『document.getElementById()』の使い方はこんな感じです。今回はstyle属性を操作してみましたが同じような記述でclass属性やhref属性なんかも操作できます。

var elem_0 = document.getElementById("test_0"),
    elem_1 = document.getElementById("test_1"),
    elem_2 = document.getElementById("test_2");


elem_0.style.color = "red"; // elem_0の文字色を変更
elem_1.href = "http://www.google.co.jp/"; // elem_1のhref属性に代入
elem_2.className = "add_class"; // elem_2のclass属性に代入

このように色々変更してみると良い勉強になりますね。結構楽しめるかと思いますのでご自身で色々書いてみると良いです。

『document.getElementById()』のようなHTML要素を操作したりするAPI(document.getElementById()みたいに元々その言語に用意されている処理群)を『Document Object Model』(おぶじぇくとどきゅめんともでる)、通称『DOM』 (どむ)と呼びます。

会話とかで結構出てきますので覚えておきましょう。

次の記事ではこのままid名からHTML要素を取得してその中身をおもいっきり変えてみます。

ではまたお会いしましょう。

この記事は桜舞が執筆致しました。