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の入力フィールドが混ざって計算されてしまうので、ミスを防ぐためにわざと変数名を変えています。 （いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。） |
[ 24] getElementByIdを使ってフォームの情報を受け取る : ssabtb
[引用サイト] http://www.ssabtb.com/2007/01/03/getelementbyid/
