JavaScriptプログラミング入門講座

ノードの参照 – Part1

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptを使って、HTML内に記載されたHTML要素(ノード)から、特定の要素を取得する方法について解説致します。
講師:
09:51

字幕

このレッスンでは JavaScript で HTML 文書に 書かれている html タグ いわゆるノードに対して JavaScript からアクセスし 参照するための方法について解説します まずはダウンロードしたファイルの中にある getelement という名前の HTML ファイルと jsファイル そして CSS ファイル それぞれをエディタで 開いておいて下さい これがそれらのファイルを開いた画面です この HTML ファイルは外部化された CSS ファイルと js ファイルを それぞれ読み込んだ形の ファイルとなっています これらのファイルを使って今回の JavaScript でhtml タグにアクセスする方法を 解説したいと思います ではレッスンを始めましょう まずは js ファイルを開いてください 今回この html タグ 要するにノードに JavaScript から アクセスするのによく使う 主な4つの方法をご紹介します まず id で取得する方法 html タグ名で取得する方法 class で取得する方法 最後に 子ノードを取得する方法 これら4つの方法を順番に ご紹介していきます ここで一度 HTML ファイルに 戻ってみましょう この html タグには既にいくつかの html タグがこのように書かれています 今回は JavaScript を使って これらの要素にアクセスして いきたいと思います 一点ご注意していただきたいのは 今回外部化された JavaScript を読み込むー この script タグは の直前に設置しています この理由は JavaScript でhtml タグに アクセスするには そのJavaScript が実行される前に これらの html タグが既にブラウザで 読み込まれている必要があるからです もしこの JavaScript 読み込みの script タグが この head タグの中に書かれていた場合は 今回はうまく動作しなくなるので ご注意下さい では JavaScript ファイルに戻ります では id で取得する方法について 説明していきます id とはよく html タグに書く id=~というものですね それを指定することによって その要素に JavaScript からアクセスしていきます では実際に書いていきましょう まず変数 var と書いて今回は変数の名前を target とします そして = そのあとにこのように書きます document. getElement  (Eは大文字) ById (BとIは大文字) getElementById です このあとに (); この getElementById というのが id を指定して その html タグにアクセスする方法です 今回はこの ( ) の中に このように  " "の中に red と 書いておきましょう この id = red は HTML ファイルで見ると こちらの要素になります 今回はこの p タグの id =red の 要素にアクセスして このタグの中に書かれている このテキストを取得してみたいと思います では js ファイルに戻りまして この続きを書いていきます 今この変数 target の中に id "red"の要素が格納されました ここから この id "red" の中にあるー テキストを取得してみたいと思います タグの中の内容を取得するには このように書きます まず変数を作ります 名前を text とします = id "red"が入った要素 target と書きます そして  .inner 大文字で HTML そして ;(セミコロン) このように書くことで id "red" が付いた

タグの タグに囲まれた内容を取得できます 今その内容がこの text という 変数の中に入りました では これをブラウザの alert ダイアログで 出力させてみたいと思います alert ダイアログは window.alert(); そしてこの alert の引数の中に 先程内容を取得したテキストのー 変数を書きます text この状態で保存します そして HTML ファイルを ブラウザで開いてみましょう この HTML をブラウザで開きます すると このように これは、「 id=red class="textbox" 」の 「p タグ」内のテキストです。 という形で出力されてきました 丁度この赤い枠で囲まれた要素の中身ですね では 「OK」を押します そしてエディタに戻りましょう ちなみに この方法を使えば 例えば 入力ボックスの中に入力された 文字も取得することができます HTML ファイルの方を見てみましょう 既にサンプルとして ここに input ボックスを作成しています id もそのまま inputbox で 入力されている内容は こちらの「入力された値です。」 となっています こちらの内容を同様に JavaScript で アクセスしてみましょう JavaScript のファイルに戻ります そして ここで同様に変数を作ります 変数の名前も同様に target としておきましょうか そして document.getElementById(); そしてこの中に id inputbox となっていましたね このように書きます そうすると この input タグの要素が この target という変数に格納されました では この input タグに入力された値を 取得してみたいと思います 変数を作って ここでは value としておきましょう = target . こちらも value とします ちょっとややこしいので変数の名前は value ではなく val としましょう そして このように input の要素が入ったー target の変数の中の value という風に書きます そしてこれを alert ダイアログで 出力してみましょう ここに val と書きます 少し分かりやすいように ここで出している alert ウィンドウは コメントアウトで出ないようにしておきます この状態でファイルを保存して ブラウザで開きます 開くのは HTML ファイルですね すると このように alert ダイアログで 「入力された値です。」と出てきました 丁度この部分ですね この input に 入力された内容が こちらに出力されているわけです では「OK」を押して テキストエディタに戻ります

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

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

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

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