JavaScript: DOMを活用しよう

クラス名で要素を絞り込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
document.getElementsByClassName()メソッドは、クラス名により要素が取り出せます。
講師:
03:44

字幕

このレッスンではgetElementsByClassName というメソッドの使い方についてご説明をします。このメソッドは class 名により要素が取り出せます。名前の通りですね。そして Elements と複数になっていますのでその class を設定した要素をすべて取り出して配列で返すという形になっています。練習用の HTML ドキュメントをChrome で開いています。これはトップページなんですけれどもたまにはページを切り替えてみることにしましょう。「 ARTISTS 」のページにします。そうすると下半分の方はこんな感じになっています。アーティストのもう少し詳しい情報が出ているというそういう想定ですね。ではここでデベロッパーツールを表示することにしましょう。「開発/管理」の「デベロッパーツール」です。せっかくこのリストがありますのでこのリストはどの要素なんだろうということをこのツールの左上のアイコンクリックしてこの1人1人はリストになっていると思うんですけれども li 要素です。li 要素には class として artist が設定されています。group も設定されているんですが今回は artist でアクセスしてみることにしましょう。 では JavaScript コンソールで「 document 」の「 getElements 」複数ですね。「 ByClassName 」このメニューの上から2番目にありますのでこれを選択します。そして括弧の中に artist と。これは単数ですね。1人1人を設定するので単数になっているようです。確認してみましょう。何人かのアーティストがいるようですけれどもそれぞれの li 要素が取り出されました。ではまた一旦クリアをして履歴を上向き矢印で取り出します。この中のさらに配列で選ばれているわけですからではこの女性にしましょう。index でいうと012ですね。ですからこの後に角括弧で2と指定するとli 要素1つですね。この女性の li 要素を取り出すことができました。その中には h3 とかp 要素があるわけですね。h3 にアクセスすることにしましょう。そのためには childNodes を確かめておくことにします。「 .childNodes 」プロパティ。これも配列でどんなこの要素があるかというのが分かりますのでh3 を取り出しましょう。これは0番1番です。ということなのでまた履歴を上向き矢印で出しましたらこれの1番。 さらに文字を取り出しましょう。文字はこの h3 の中の単一の子どもですね。ですから firstchild でアクセスすることができます。「 firstchild 」と。でこの女性の名前でしょうね。取り出すことができました。このレッスンでは class を与えられた要素複数を配列で取り出すgetElementsByClassName というメソッドの使い方についてご説明をしました。さらに childNodes や firstchild を組み合わせてプロパティを使うことによって要素を絞り込むという方法もご説明しました。

JavaScript: DOMを活用しよう

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

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

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

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

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