>> JavaScript入門トップに戻る

要素のオブジェクト取得

今回は要素のオブジェクト取得方法について説明します。
講座の最初でも説明しましたが、
JavaScriptはwebページを動的に書きかえることが出来ます。
下記のボタンを押してみてください。

名前を変えます。

ボタンをクリックすると↑の文字が変わって、回数が増えていきますよね?
このようにWEBページ上の文字や画像も動的に変えることができます。

この処理の流れとして、

1.該当要素のオブジェクトを取得

2.オブジェクトからアクセスし値を書き換え

という流れで処理を行っています。
今回はその1.のオブジェクトの取得について、説明します。
まず、上記のボタンのと名前変更部分のコードです。

<button onclick="namechange();">下の文字を変えます。</button>
<font id="button1">名前を変えます。</font>

次に、javascriptのコードです。

var count=0;

function namechange(){
	var temp=document.getElementById("button1");
	
	++count;
	
	temp.innerHTML="名前変更しました。"+count+"回目";
}

html部分のコードは大丈夫でしょうか?
buttonタグでボタンを作り、onclickイベントでnamechange関数を実行してます。
その下のfontタグで、id属性を指定し、”button1"という名前のID名を持たせています。
これを覚えておいて下さい。
次にjavascriptのコードですが、
まず、グローバル変数として、count変数を0で初期化し宣言しています。
次に関数内の最初の行でオブジェクトを取得しています。
今回使っているのはgetElementById関数です。
これを実行するには、documentオブジェクトというhtml全体のオブジェクトからアクセスする必要があるので、
前に「document.」という名前が付いてます。
これは、指定したID名のオブジェクトを取得する関数です。
今回は先程fontタグにつけていた、button1というID名を指定しています。
これで、temp変数には、fontタグのオブジェクトが取得できました。
このオブジェクトからは先程のfontタグに関する情報を取得・変更することができます。

次に、グローバル変数のcountを1足したあと、
オブジェクトが入っているtemp変数から、innerHTMLというメンバに
アクセスして値を書き換えています。
innerHTMLの中には、オブジェクトのタグで囲ってある中のhtmlのコードが入っています。
つまり、今回でいうと、「名前を変えます」という文字が入っています。
その文字を、右項の「名前を変更しました。〇回目」という文字を代入して変更しているのです。
右項の代入では、文字列と数字の計算を組み合わせて、文字列として代入しています。
通常の変数の値を、文字列として付け加えたい場合は、
文字列や変数に+の演算子を付けて該当の変数を書きます。
これで一つの文字列として結合することができます。
後はボタンを押すごとに、グローバル変数のcountの数が増えていくので、
回数が増えていくという仕組みになっています。

これがオブジェクト取得して、値を書き換える方法です。
今回はgetElementById関数を使いましたが、他にも色々同じような関数があります。

●document.getElementsByTagName
→引数にタグ名を指定。該当のタグのオブジェクトを配列で返す。
●document.getElemtntsByName
→引数にname属性に指定されている名前を指定。該当の属性のオブジェクトを配列で返す。
●document.getelementsByClassName(※一部ブラウザのみ)
→引数にクラス名を指定。該当のクラスのオブジェクトをを配列で返す。

getElementsByClassNameは一部のブラウザでしか使えません。
どの関数も、getElementsとElementがElementsとsが付いて複数形になっています。
タグやname属性等はWEBページ内で重複が許されるので、当然マッチするオブジェクトも複数あります。
なので複数形になっており、また、取得するオブジェクトも配列として複数で返って来ます。
たとえば、

var temp=getElementsByTagName("div");
temp[0].innerHTML="aaa";
temp[1].innerHTML="bbb";

このようなコードを書いた場合、
変数で受け取った後、配列で受け取るので、各オブジェクトにアクセスするときは
temp[0]
temp[1]
のようにアクセスします。
たとえ取得したオブジェクトが一つだったとしても、
temp[0].innerHTMLとしてアクセスしないとアクセスできません。
配列というのは、変数の塊のようなものです。
var test[10]のように、変数名の後ろに[]とその要素の数を書きます。
この場合だと、test[0]~test[9]までの要素を確保したことになります。
最初はtest[0]と0番の要素から始まってることに注意して下さい。
だから最後の要素はtest[9]なのです。
各要素にアクセスするには、

配列名[要素番号];

と書いてアクセスします。
分からない人はC言語講座の配列の章を参照して下さい。

今回の説明は以上です。
次回はタイマーの設定について説明します。

>> 【タイマーの設定】に進む
>> JavaScript入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)