初心者向けの、HTMLタグオブジェクトの指定方法です。basicな古い基本的な方法から今のDOM時代の方法まで。操作対象を指定するには状況に応じていくつも方法があります。(応用編)グループ化document.getElementById()最も使われているIDからオブジェクトを指定する方法がこれです。全体のオブジェクト構造など気にする事無く初心者でもすぐに使える最も一般的な方法と言えます。'id'、"id")で、ピンポイントでオブジェクト指定ができます。記述で大文字と小文字は絶対に守る事。document.allの使えるIE、OperaではこのgetElementById(name)でもオブジェクト指定できるケースがあります。nameは使えないと思い込んでしまっても良いです。IE専用の開発であればもっと楽な方法もありますし。documentが先頭に着く必要を考えればわかると思いますが、documentのメソッドです。従って他のウィンドウやフレームの場合は、そのウィンドウのdocument指定する形を取ります。document.getElementById()と言う記述は、たかがIDからオブジェクトを指定するのにはとても長い記述です。頻繁に使われてるメソッドの一つなのに何故こんな長い名前にしたんだ?って感じです。$という1文字の短縮系にする方法も簡単です。私の場合はGet_Objとか、byIDと言うのを以前から利用していました。これだけの為ならprototype.jsを使う必要は全くないので自分でショートカット用関数を作りましょう。関数名は自分の好きに。}これで短縮できます。エラーを出さずに静かに拒否したり(出た方が判りやすい場合もある)、このメソッドが使えるか?のチェックも兼ねさせてしまいます。戻るようになっています。処理開始の時点でDOM対応ブラウザかどうかを調べる時に使います。false;の様にして未対応ブラウザの場合は処理を拒否。メッセージを出します。}$(id)の様にidを入れれば、document.getElementById(id)を実行します。これだけで対象IDのエレメントをHTMLオブジェクトとして指定する事になります。言う特殊なオブジェクトの状態になります。}の様に一旦そのIDが存在しているのか?を問う事も忘れないように。null値になった物をそのまま使うとエラーが出ますから。自分で工夫して、自分のプログラムで使いやすいように、オブジェクト指定以外にも必要な情報を使えるようにしておく手もあります。拡張例として、ちょっと丁寧に書いてあります。innerHTMLやinnerText、textContent、value(フォームエレメントの場合)の値をとる短縮形もつけてしまうと便利です。HTML表記文字を返します。表示上のテキスト文字列。フォームエレメントの場合はvalue値を返します。たいした拡張ではありません。innerHTMLと言う表記を短くする効果しかありません。するだけなので楽になります。短縮形はそもそもDOMを先駆けて使えたIE4等のdocument.allとその後のdocument.getElementByIdを、どちらでも使えるようにその差異を関数の中で処理する事も目的でした。私はまだそうしていますが、アクセス解析を見てもIE4は0%に等しいです。私は下位ブラウザが理解出来る程度の簡単なJavaScriptを書く時は下位ブラウザを切り捨てないと言う考えです。IE6以上を基準にしても全く問題ないと思います。言うのがつい最近、Microsoftが自動UPDATEでIE7の自動インストールを開始すると言うニュースがありました。サービスを利用してるユーザーが困るので自動ではなく選択にしていたようです。オンラインサービスのIE7への対応がほとんど終了したとの事で、自動インストールに踏み切ったようです。初心者ページのオブジェクトで、JavaScriptの基礎部分でのHTMLのオブジェクト構造を説明しました。この昔ながらの方法はその基礎部分に沿った方法です。基礎の部分を知っておく事で呪文が通じない時に便利な場合があるので解説しておきます。代表例としてフォーム(とその部品)、イメージ、アンカーなどは扱えるように出来ています。逆に言えば、これらを扱う為にJavaScriptであったとも言えます。JavaScriptはページが読み込まれた時点でfomrselements(個々のformの部品)options(更にselectの場合の子)imagesanchors等のHTMLの超基礎要素の配列をdocument下に自動的に生成します。付いてるのもわかりやすいですね。これらの配列はインデックス型の普通配列とキー型(name属性)の連想配列の両方です。これらを基本の上層からのオブジェクト指定方法で書く事で対象を指定することが出来ます。)を省けますのでこのドキュメントの1個目のアンカー(タグ)document.anchors[0]このドキュメントの1個目の画像(タグ)document.images[0]このドキュメントの1個目のフォーム(タグ)document.forms[0]このドキュメントの1個目のフォーム(タグ)の中の1個目のエレメントdocument.forms[0].elements[0]フォームとエレメントは主従関係で2重配列になってるのでdocument.forms[0][0]と言う書き方で省略可能です。name属性でそのままframes、images、forms、などはこの方法が出来ます。anchorsは元々はname指定を用意していなかったようで無理です。divなど用意されていない物も無理です。name="el1">の様な部品document.forms1.el1また、これらの方法を混ぜこぜにしてもOKです。(1行つながりです)top.fr1.document.form1.el1.options[top.fr1.document.form1.el1.selectedIndex].value(1行つながりです)の様に長くてミスもしやすく特定もしにくと言うのが現実でした。top.fr1.document.form1.el1;sel[sel.selectedIndex].value;の様に書くのが当たり前ですが、それでもオブジェクト構造を意識しないと駄目なので面倒でした。操作をしない場合などはIDもつけずにdocument.forms1.el1の様に使う事は今でも普通に行われています。結果的にオブジェクトを指定できれば良いとは言っても、違う方法である事は意識してください。いう意図でどういう方法を使ってるかは明確に意識して偶然に頼らないように。/allコレクションいち早くドキュメント全体を操作対象と考える方法をMicrosoftのIE4が実装しました。オブジェクト指定できるようにした方法です。tagsコレクションなどもあり今現在のDOMとあまり変りの無いものでした。document.all()使い方は簡単です。)で、対象をオブジェクトとして指定できてしまいます。idではなくnameの場合もdocument.all()で利用できます。document.allを省略する事も可能だった点です。name="form1">ならform1だけで、もう既にそのオブジェクトを指定してるのと同じ事になります。これでとてもスマートなコーディングができるようになっていました。そのIDやnameがオブジェクトが代入されたグローバル変数として自動的に定義されていた事になります。逆にこの便利すぎる部分が迷惑な部分にもなっていました。ドキュメント内のID名が全てグローバル変数として予約されてしまうのはちょっと迷惑です。気をつければよい事ですが、大きいファイルになるとちょっとね(^^ゞまたスクリプトが本格的になればなるほど、無駄にグローバル変数や関数は作りたくないですし。ま、document.allはIE専用の開発以外では出番がほとんどなくなりました。document.allしか持たないIE4まで含めた開発をする時以外はあまり使いません。アクセス解析を見ててもIE4は見かける事はほとんどありません。document.getElementsByName()これはドキュメント内のnameコレクションから指定nameで抽出するものです。指定した戻り値が配列である事が想像つきますね?。IDはユニークな物でないといけない決まりですが、nameはフォームではラジオボタンなど同じ物が存在する場合があります。従ってnameでは特定せずに一旦配列として取るようになっています。配列(コレクション)なのでその要素はitem(index)として取り出します。item()を使わず普通の配列の様に指定しても大丈夫です。配列なのでlengthプロパティで要素数もわかります。このdocument.getElementsByName()は使い勝手が悪いです。IEでは前述してるJavaScriptの基礎の方法でnameが使える物にしか作用しません。byNameで取れてしまいます。Netscape系ではDIVやSPANタグにnameをつけて利用できますがIEでは無理です。IEだとDIVやSPANタグにIDをつけて、このメソッドで取れますがNetscape系では無理です。言う事で、IE、Netscape系共通で使えるのは、JavaScriptの基礎部分でname指定取りができるHTMLタグに限られます。IMG、FORM、FORM部品、などです。ま、時代的にname属性はフォーム以外ではあり得ない時代でもありますので、使えなくても差し支えないでしょう。getElementsByTagNameが広範囲で使えると言う事にもなります。ま、そこまでしっかりHTML側を組んでるならID指定すれば良いわけですが・・・。全体をスマートで洗練された方法に書き換えるよりは、多少無駄でも・・・と言う方法をとることもあります。臨機応変に利用してください。何らかの状況でdocument.getElementsByName()を使う時はこのブラウザによる特性の違いに気をつけてください。指定したtagnameに該当するものを抽出するメソッドです。指定した戻り値が配列である事が想像つきますね?。document.getElementsByTagName(tagname)document.getElementsByTagName("*")"*"はタグを特定せず全てのタグを取る時のワイルドカードです。document.getElementById('div1').getElementsByTagName('img')この様に絞り込んだ特定範囲内からの抽出もできます。える状態になっています。この配列を処理しながら条件に合う物だけ抽出するなどの作業が必要になります。基本は配列なので長さはobject.getElementsByTagName(tagname).length個々の要素はobject.getElementsByTagName(tagname).item(0)object.getElementsByTagName(tagname)[0]の様に配列indexで指定できます。個々の要素にIDがあればobject.getElementsByTagName(tagname)["id"]object.getElementsByTagName(tagname).id(このIDは実際のID名。プロパティ名がIDと言う意味とは別)の様に指定する事も出来ます。ま、最初からIDを使うならbyTagNameを使うケースはあまり無いですけど。Object.getElementByTagName()は、非常に便利です。甘い設計を補う為の手抜き用に使うのはあまり良い事ではないです。状況に応じてこの方が汎用性、優位性がある場合のみ使うような方法です。こんな使い方をします。IDの有無とは関係なく面倒です。//関数へのハンドラー等}の様に特定の小範囲の内包要素の該当要素全てに処理をする必要がある場合などには向いてると思います。全てのIMGタグにonclickを埋め込まなくても済んでしまいますけど。結局何をやるにしても『目的の操作対象』が必ず意識されてるわけです。自分が扱うページで『不特定多数のタグ』を相手にする事はそれほど多いケースではありません。『これしか手が無い』あるいは『これが最も有効』と言う場合に使いましょう。コーディングを短くする『省略の美学』を設計者は好みます。コーディングが短い事とトータルの実行処理がスムーズである事は別の場合もあります。ベタな方法でも実行処理が早い、無駄な負担をかけない事を美学とする考えもあります。こんな事を書くかと言うと、このメソッドで全てのタグをオブジェクトにして配列にすれば、for文で全要素チェックを行ってそこからIDやClassNameやその他アトリビュートなどをチェックして・・・と言う方法を使えば特定できるのは当然です。それは引き出しから1個の物を取り出す為に引き出しの中身を全部机の上に出して探して・・・と言う作業をしてるのと同じです。引き出しをひっくり返すような事をしないのがスマート且つ速く処理が進みます。机の中(id名やclass名や構造など)を最初から整理されている事も大事です。逆に、引き出しをひっくり返して探した方がずっと便利な状況においては、積極的に使っていくべきです。Object.getElementsByClassName()これはドキュメント内から指定ClassNameで該当するものを抽出するメソッドです。Object.getElementsByClassName(classname)が、これはFireFox3からの実装になると思います。IEも多分時期IEに実装してくるかもしれませんね。そのグループ(個別要素の配列)をコントロールできる事は便利です。対象のCSSの内容を変更するのであればdocument.StyleSheetsでセレクタを指定して値を指定すれば済む話です。CSS設定との絡みなどを気にしながら使わないといけないクラス名で無理にグループ分けする必要はないです。getElementsByTagName()で必要な範囲の指定タグ(または全部)をとる。↓for文で各要素のクラス名をチェックして該当する物を配列化する。同じクラス名の集合配列が出来上がる。タグをワイルドカードにした場合はあらゆるタグの配列を操作する必要が出てきます。最初から設計する場合は無駄な処理方法と言えます。window.onloadのタイミングで配列を作ってしまっておくのが良いです。結果的に無駄な処理を増やさない方法をID付けの時点で設計していくべきです。自分の製作してるHPであれば、設計をきちんとしておく事で無駄な処理を省けます。IDの付け方はプログラムの設計の最初の整理です。getElementsByClassName()が実装されれば、無駄なループ処理がなくなりますから使い勝手はもちろん良くなりますので期待しています。グループ化これは、HTMLエレメントをグループ化する必要がある場合の方法論です。クラス名をJavaScriptでそのまま利用しやすい状況なら良いのですが、そうでもない場合もあります。そのクラス名の中で更にまた分類したい場合などもあります。いう場合は勝手にタグのアトリビュートを作ってしまう手があります。<DIV>grpなどと言うアトリビュートは無いので無視されますから気にしない。グループ名は配列で使いやすいように0からの数字にする。等のグループ名(数字)をindexとした要素がさらにそのグループに属するHTMLオブジェクトを格納してる2次元配列となります。){Group[グループ番号][i].style・・・・}の様に操作できます。前の方に書いたように全てのタグをチェックなんて方法はあまり推奨する方法ではありません。[['id','id','id','id','id','id'],['id','id','id','id','id','id'],・・・]の様に手書きリストで配列を書いておくのと同じ事です。静的なリストであれば、それをプログラムで取得するのは無駄な処理が増える事になります。(接頭語、接尾語)これは最も?古くから使われている方法だと思います。使う名前を最初から考えてつけます。無計画な方法を後からカバーするより最初からしっかりプランを立てておく方法です。id="img2_4">最初からこうしておけば、グループ分けされてるのと同じ様に扱えます。nameをつける時に、その場その場で好きな名前を付けていくのは無計画すぎますしね。i).style・・・・}最初からきちんと整理されていれば、必要な対象オブジェクトの数だけのループ処理で全てが済みます。調べる時もmatch()などで探しやすいパターン化したIDにしておく事は有効になります。動的なプログラムや汎用性のあるプログラムを書く時はこれでは使いにくくなります。その時の用途・目的などにあわせて臨機応変に。行き当たりばったりでIDをつけたり、クラス名をつけたりしない事はJavaScriptにとっては大事です。IDの付け方、クラス名の付け方、処理の仕方を工夫していけば、その時その時で最良の方法が見つかります。前にも書いていますが、id、name、class名を整理整頓して付けていく事がプログラムの最初の段階でもあります。配布素材以外のコンテンツの無断使用・転載を禁じます。