JavaScript: DOMを活用しよう

HTMLタグにより要素を選ぶ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
document.getElementsByTagName()メソッドは、HTMLタグにより要素を選びます。
講師:
06:05

字幕

このレッスンでは getElementsByTagNameというメソッドをご紹介します。このメソッドは HTML タグを指定して要素を選ぶことができます。id 属性があれば getElementById を使えば一発なんですけれどもすべての要素に属性が id が付いているわけではありませんのでそういうときはタグでまず絞り込むということができます。そして getElementsByTagNameなんですけれどもそのタグを持つ同じタグを持つ要素がたくさんあります。それらを全部一通り取り出してくれます。なので getElementById が単数なのに対してこちらは getElements と複数になっていることにご注意ください。引数にはタグを文字列で。例えば p 要素であるとかあるいはa 要素とか li 要素ということでそのタグを文字列で渡します。HTML ドキュメントをChrome で開きましたのでまずはデベロッパーツールで試すことにしましょう。表示の「開発/管理」でデベロッパーツールです。そして早速使ってみます。document の getElementsByTagName 。矢印キーでこのメニューを辿っていくと4番目にありましたからこれでOKですね。 そしてでは li 要素にしましょう。そうするとやはりたくさんありますね。先頭はこの「 home 」というメニューになっています。もう少し下の方にあるのは例えば人の顔がありますけれどもこの人ですね。このアーティストの写真という想定なんですがこれらのリストに絞り込みたいと思います。そうするとこの最初の人をこの左上のアイコンでクリックする。そうすると選ばれていますけれどもこれはまず img が選ばれていますがツリーを上に辿っていくとここで id 属性が付いているということが分かります。「 featuredartists 」ということですね。ではまずこれで一旦 getElementById で絞り込んでからこちらのタグネーム、タグ名で取り出すという形にしましょう。1回クリアして「 document 」の「 getElementById 」。単数ですね。そして「 featuredartists 」ですね。「 artists 」複数形ですね。合っているかどうかここで一回確認しておきます。取れたようです。ではこの後に続けてということで今入力したものを上向き矢印 JavaScript コンソールで履歴を辿って「.getElementsByTagName 」と入れたいんですが長いですね。 しかもこの後に続けて打った場合に. でコードを補完してくれません。ちょっと不便なので HTML ドキュメントの方で入力することにしましょう。ここはコピーしてしまいます。クリアしておきましょうか。HTML ドキュメントを Dreamweaver で開きました。そして body 要素の下の方に script 要素JavaScript コードをタイプするところがありますのでここで先ほどコピーした命令をペーストしますが変数に入れておくことにしましょうね。「 myNode 」ということでバー宣言をしました。そして先ほどのコピーしておいたものをペーストし、この後ですね、「 getElementsByTagName 」コード補完が出てきてくれて大変助かりますね。2番目です。これを選択し Enter で選択しました。そして li 要素ということにするとgetElementById で id 属性が絞り込まれていますので先ほどよりはリストが少なくなるとli 要素が少なくなります。確かめましょう。console.log で myNode をコピーを持ってきます。一旦保存しましょう。Chrome に戻ってリロードをします。 そうすると li 要素の配列になっていますね。これが1番目2番目なんですが通し番号 index は0からスタートします。ではこの何番目でいうと2番目なんですがindex1 の女性この人を取りたいと思います。また Dreamweaver に戻りましょう。「 getElementsByTagName 」から選べるものはその指定した要素の配列ですね。なので配列で先ほど2番目 index では1番ということですので1と指定するとあの女性の要素だけが取り出されるということになります。では保存しましょう。Chrome をリロードします。そうすると li 要素が1つだけ取られてこの女性ですね。目的とした要素を取り出すことができました。このレッスンではメソッドgetElementsByTagName をご紹介しました。引数にタグ、要素の名前を入れてあげるとそのタグの要素を配列にして返してくれるということですね。そして getElementsById などと組み合わせると絞り込みが簡単にできます。その中の1つを取り出したい場合には配列のアクセスの仕方を使うということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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