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

ノードの参照 – Part2

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

ぜひご覧ください。

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

字幕

それでは次に このHTMLタグ名でストックする 方法について説明していきます HTMLのタグ名というのは いわゆるpタグとか div タグとか h1タグというような感じですね それでは実際に書いていきます 同様に変数を作って 名前を target としておきます そして document と書いて .getElementByTagName(); です そしてここで注意したいのが ここは getElement の t の後に s が要ります 複数形になるわけですね そしてここの引数の中に 取得したいタグ名を書きます 今回は div としておきましょう ダブルクオーテーションの "div" です さてここでHTMLファイルを見てみます HTMLファイルには ここに divタグがありますね 今回はこの divタグの こちらの内容を取得したいと思います それでは JavaScript のファイルに戻ります さて divタグの内容を取得するには 同様に変数を作って text としておきましょう そして = target この target は今 div タグの要素が 入っていますね この target. 先程と同じように innerHTML そしてセミコロン このように書くことで div タグの内容が text という 変数の中に入っていきますが 一点注意して頂きたいのが 先程こちら getElements 複数形になりますというお話をしました この getElements となっている場合は この target に入ってくる値は 配列となって入ってきます 要するにこのように divタグで要素を検索するような 形になっているので ひとつのHTMLファイルの中に 複数ある可能性があるわけです ですのでそれら複数のデータが こちらの変数 target に 配列となって入ってくるわけですね ですので今回はこの target という変数は 配列型のデータになっているために ここに[ ](ブラケット) この括弧を置いてあげます そしてインデックス番号を置いてあげます 今回は 0です さて今回「0」と書いたのは こちらのHTMLファイルに div タグがひとつしかないためですね もし複数ある場合は これが0 そして2番目の div タグが1 3番目の div タグが2 という形になってくるわけです それでは JavaScript ファイルに戻りまして これをブラウザのアラートダイアログに 出力してみましょう window.alert そしてこの中に text ですね そして分かりやすいように 上のアラートは コメントアウトしておきましょう そしてファイルを保存します そしてブラウザで開いてみましょう するとこのように 『これは、「id-green class ="textbox"」の 「div」タグ内のテキストです。』 というふうに出力されてきました ちょうどこの緑の枠で囲まれた内容ですね それではOKボタンを押して エディタに戻ります 続きまして今度は class で取得する方法です こちらもさっそく書いていきたいと思います var terget = document.getElements こちらも複数形です s が付きますね そして ByClassName(); そしてこの中に class の名前を書きます HTMLファイルを見てみます するとこちらに class の textbox というのが複数ありますね こちらを書きます こちらをコピーして JavaScriptファイルに 戻って この中に貼り付けます 今回も getElements 複数形になっているので ここの target の中に入ってくるデータは 配列型のデータとなります 要素の中身にアクセスする方法については 先程のHTMLタグ名の時と同じです 例えば今回ですと これをコピーしてきて こちらに貼り付けます そして例えば2番目のデータに アクセスしたいのであれば ここに1と書いてあげればいいわけですね あとの扱い方についても同じなので 今回は省略いたします さて最後に こちらの 子ノードを取得する方法について 解説いたします 一度ここでHTMLファイルを見てみましょう 子ノードとは 例えば この ul タグのような感じですね このように ul タグがあって その子供に li タグが紐付いています この li タグにアクセスする方法を 説明いたします ちなみにこの ul は id が list となっていますね これを覚えておいてください コピーしておきましょうか それでは JavaScript ファイルに戻ります それでは実際に子ノードを取得する方法を 書いていきます 同じように変数を定義します target = まずは getElementById id で ul タグを取得します document.getElementById(); ですね getElement ですね ById そしてこちらの引数に 先程の list を貼り付けます これで li タグの親要素となる ul の取得ができました こちらの target という変数に それが入っています ではこの子要素の li タグの中に入っている 中身を取り出したいのですが 先程 li タグは合計3つありましたね この中の2番目の中身を 取り出してみたいと思います その場合はこのように書きます まず変数 text を作成します そして親要素となる target ですね そして .(ドット) この後に children と書きます そして .(ドット) その後に何番目かというのを書きます itemと書きまして () そしてこの中に2つ目なので1と書きます それはプログラムの世界では 0から数字が始まるからですね そしてこの後に .(ドット) そして先程と同じように innerHTML と書きまして セミコロンですね それではこちらを ブラウザのアラートダイアログに 出力してみたいと思います window.alert(); そしてこの中に変数 text ですね ここまで出来ましたら 分かりやすいように こちらのアラートを コメントアウトしておいた上で ブラウザで確認してみたいと思います 保存をして そして HTML ファイルを ブラウザで開きます するとこのように「項目2」と 出てきましたね ちょうどこのオレンジの枠で 囲まれた部分です 1 2 3と書いてあって 2番目の要素が 取得されているのがわかります それではOKを押してエディタに戻ります 以上でレッスンは終了です 今回はJavaScriptで HTML 文書に書かれているー HTMLタグ いわゆるノードに JavaScript からアクセスして 参照するための方法について解説致しました 少し難しい内容になってきましたが これを習得すると JavaScript で 動的にページのコンテンツを 変更したりすることができるようになります しっかりとマスターしておきましょう

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

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

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

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

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

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