getElementByIdに関する解説
長澤まさみ関連キーワード集 |
|
Home
長澤まさみに関する用語（シソーラス、類義語）のうち、 getElementByIdに関する情報を示しています。
2007年 09月 12日 16時55分47秒最新情報
スポンサード リンク
|
getElementByIdに関する検索情報
|
[ 4] getElementByIdを使ってフォームの情報を受け取る : ssabtb
[引用サイト] http://www.ssabtb.com/2007/01/03/getelementbyid/
(X)HTML上に2つの入力フィールドを設け、そこに入力されたつの数値を足し算して、JavaScriptアラートで表示する。
このJavaScriptのポイントは、いかにしてテキストフィールドに入力させた文字列を、JavaScriptに持ち込むかとうい点になります。
（id属性の用途はいろいろあり、(X)HTMLのアンカー要素としても使えますが、ここでは個々の要素をJavaScriptから識別するために使用しています。）
JavaScriptの以下のコードで、テキストフィールドのid属性から、数値を入手することを実現しています。
この書式の解説ですが、documetとは、現在読み込まれ、表示されている文書そのものを示すオブジェクトのこと。
このdocumentオブジェクトが持っている情報は、現在読み込まれ、表示されている(X)HTML文書そのものです。この(X)HTML文書に含まれている様々な情報が、このdocumentオブジェクトの中に含まれています。
次に登場するのが、documentオブジェクトにある、便利な機能のgetElementByIdメソッドです。
このメソッドは『id属性（id）によって（By）要素（Element）を取り出す（get）』という機能を持っています。』
getElementByIdメソッドを用いると、id属性さえついていればその要素を直接とり出す事ができます。
なぜこのようなまわりくどい計算なのかというと、JavaScriptではa + bと書いてしますと、文字列の結合になり、もしaが1で、bが2であば、c = a + bでは、cが12になっります。（文字列を連結するので）
これを避けるためにbに-をつけ、-bとすることで、このbはマイナスがついている数値であることを明示し、そして a - -bとすることで a+bという計算になるようにしているのです。
2つのテキストフィールドの入力値を計算するサンプルと違い、このサンプルではinput要素のidがnumber01、number02、number03と、0が付いて桁が増えています。なぜこのような違いがあるのかといえば、1つのHTML文章には、１つのidは1度しか使用できないルールがあるためです。したがって、先ほどのサンプルとはあえて違うルールのidをつけています。
もし先ほどのサンプルので使用したidを使ってしまうと、どちらのサンプルでも計算ができなくなってしまいます。
また、JavaScriptの変数名を変えているのも、1つのHTMLで使用するJavaScriptに同じ変数名があれば、後に出てくる変数をJavaScript使用してしまうため、サンプル1とサンプル2の入力フィールドが混ざって計算されてしまうので、ミスを防ぐためにわざと変数名を変えています。
（いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。）
|
|
|
戻る
|
|
■ 長澤まさみシソーラス（類義語集） getElementByIdに関する解説 ■
Copyrightc2006 ■ 長澤まさみ大辞典 ■ All Rights
Reserved.Copyright
|
