JavaScript: DOMを活用しよう

form要素を名前で操作する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
formの要素をname属性に定めた名前で操作することができます。
講師:
07:29

字幕

このレッスンでは form の要素を name 属性に定めた名前で操作してみます。今サンプルの練習用のページを開いていますけれでもトップページには form がないので「 REGISTER 」のページに移ります。そしてデベロッパーツールを開きましょう。今 form の最初のフィールドが選ばれていましたけれどもこれはどこにあるのかというとデベロッパーツールのウィンドウの一番左上のアイコンで選択してみると form がありますね。そして id が付いているんですが今回は name の方で操作をしてみます。今選んだ一番先頭のフィールド。テキストを入れるところですけどそこにも名前が付いています。とりあえずこのページに form がどんな要素があるのかというのはdocument の forms というプロパティで調べることができます。「 document. 」 form が複数あることがありますので複数あったら複数取り出すというのがforms です。そうすると1個だけ定められていることが分かります。その中の1個目を取り出す。これは一個でもの配列になっていますからそのフォームの要素を取り出したいのであれば今は履歴上がりましたけれども矢印キーですね。 そして0角で括弧で指定するとフォームの要素を取り出すことも出来ます。尤も今回のテーマは名前です。この form には「 register 」という名前が付いていますから名前で参照することもできます。この場合にはやはり「 document 」でこの名前を直接 . で「 register 」ですね。と入力すると同じものが取り出せます。ちょっと一杯になってきたので一回クリアしましょう。でこの「 register 」というフォームの中にこの「姓名」名前を入れるフィールドがあってそこにはやはり名前として myname が定められています。ということなのでまた履歴を上向き矢印で辿って「 register 」の中の「 myname 」という風にすればこの input の要素ですね。その要素の参照を取ることができます。ではここに値を入れてみましょう。値はプロパティは「 value 」というそのまま英語にしたプロパティですね。また上向き矢印で履歴を追って「 value 」という風にしてここに設定をするときにはイコールでクオテーションで囲って名前を入れましょう。Enter キーを押しますと今名前の input 要素はフィールドは空ですけど Enter キーを押すと名前が入ります。 では JavaScript コンソールを一回クリアして少しウィンドウをスクロールします。そうするとまたこの左上のアイコンで調べますけれども。チェックボックスですね。ここにもやはり名前が付いています。「 subscribe 」ということでこれは「いる」の方ですね。もう1つ「いらない」の方にも「 subscribe 」と名前が付いています。これでアクセスしますが今回はメソッドを使います。「 document 」の「 getElement 」のシリーズですね。「 getElement 」複数になっていますので「 Elements 」ですけれでも上から3番目「 ByName 」。ここで括弧の中に名前を文字列で指定します。「 subscribe 」ですね。そして「 Elements 」と複数になっていることから想像がつく通り戻る値は配列です。そして2つのラジオボタンが要素の中に入っています。現在始めの方の「いる」の方のラジオボタンが選択されています。なぜかというと「 checked 」という属性が付いているからです。これを切り換えてみましょう。ではまた履歴を辿って「いらない」の方は2番目ですけれども配列アクセスの場合には1番ということになります。 その中の「 checked 」という属性を変えてやろうということで文字列で「 checked 」と入れます。まだ Enter キーを押していません。今「いらない」が選ばれていませんけどもEnter キーを押した瞬間にこちらにチェックが移りました。今度はまた左上のアイコンでこの選択リストですね。これを選んでみました。そうするとやはり名前が付いています。「 reference 」です。ということなのでアクセスの仕方というのは「 document 」の中の「 form 」の名前は「 register 」でした。そしてその中にあるこの選択項目のセレクト要素ですね。これは「 reference 」ということですのでその value値に対して何を設定するかというと3番目が「 facebook 」になっていますのでこれを設定します。ただしカウントの仕方は012ですから2番目ということになるんですけれでもここに値として「 facebook 」という値を入れます。そして Enter キーを押します。「 facebook 」に変わりました。さらに今どの項目が選ばれているか知りたいという場合ですね。先ほど何番目かはカウントしておきました。 index でいうと2番でしたよね。その index を取るのがまた履歴を辿ってますけれでも「 selectedIndex 」と。これですね。そうすると何番目が選択されているかというindex が表示されます。2番目。2番目と言っちゃいけないですね。012と index が2ということになります。このレッスンでは form の要素を名前で扱うname 属性で扱うという方法についてご説明しました。name 属性は document の後に . でどんどんつないでいけばいいということですね。そして値を設定する場合には「 value 」それからチェックのあるなしというのは「 checked 」という値でした。また index このセレクションのindex を取るには「 selectedIndex 」というプロパティを使うということでした。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日
再生時間:3時間24分 (33 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。