JavaScript: DOMを活用しよう

セレクタで要素を選ぶ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メソッドdocument.querySelector()とdocument.querySelectorAll()を用いて、セレクタにより要素を選んでみます。
講師:
08:36

字幕

このレッスンでは2つのメソッドquerySelector と querySelectorAll の使い方についてご紹介します。いずれのメソッドも引数に CSS の Selectorと同じ指定ができます。それによって要素を絞り込んで取り出すということなんですがquerySelector の方は1つの要素を返します。複数の要素がその selector に合致する場合には一番最初のエレメントが返されるということになります。例えば class の場合であれば. で class を指定すればいいと。文字列ですからクオテーションで囲みます。ただちょっと注意が書いてありますけれでももしクラスだけで要素を選びたいという時には専用の「 getElemntsByClassName 」使った方が処理は速いということです。ではもう1つのメソッドですね。「 document.querySelectorAll 」。こちらは渡す引数についてはquerySelector と同じです。ただ All という名前から見当がつく通り当てはまるこの selector に合致するものすべてを配列に入れて返すということです。ですから複数を取りたい場合にはquerySelectorAll を使う。 最初の要素を取って来たい場合にはquerySelector を使うということになります。Chrome 練習用のサンプルのページを開きました。ではデベロッパーツールで確認してみましょう。「開発/管理」の「デベロッパーツール」です。何を取ってこようかということなんですが、ではこのツールの一番左上でこのあたりをクリックすると「 id 」「 article 」という要素になっていますね。こちらも同様で article 。こちらもそうです。これらを取ってきたいという場合ですね。まず単独で最初の1個を持ってくるという場合の querySelector を使ってみましょう。JavaScript コンソールで「 document 」の「.querySelector 」は下から2番目。メニューから選んでこれで確定ですね。そして「 article 」という風にしてみます。そうすると当てはまる最初のこれが最初ですね。最初の要素が選ばれるということになります。では「 Selector All 」にしてみましょう。上向きの矢印で履歴を辿って「 querySelector 」となっていますが「 SelectorAll 」です。 そうするとこの selector に当てはまるすべての要素が配列に入って出てきます。最初の2つくらい確認しましょうか。これが最初のものですね。次の article ということで。SelectorAll querySelectorAll で選択をしてからこの配列の中の index を指定することができます。クリアしまして履歴を取って配列ですから角括弧のアクセスで0とすると一番先頭になりますからquerySelector の場合と同じ最初のarticle が選択されました。ではちょっとページを変えてみましょう。ページを「 ARTISTS 」にしてみます。ページを少しスクロールをしてアーティストのリストがあるということなんですがこれまたデベロッパーツールの左上で li 要素っぽいですね。クリックすると確かに li 要素です。そして「 artist 」という class が設定されています。class で要素を選ぶこともできます。これが先ほどの注意書きにありましたけど単独の class だけで要素を取り出したいという場合には専用のメソッドを「 getElemntsByClassName 」の方が速いということなんですが使えるということをお見せするために使ってみましょう。 ではここで「 artist 」ですね。途中まで使えるので使いましょう。「 artist 」ということで all ですからリストの形で出てきます。最初の3人くらい確認すればいいですかね。順番に取り出せています。ではまたちょっとスクロールを戻してまたページを変えます。「 REGISTER 」のページです。ページをスクロールすると「 radio 」ボタンがありますね。これ又ツールのウィンドウの左上のアイコンでこの radio ボタンを選択してみます。「 input 」の要素ですね。そして「 type 」は「 radio 」ラジオになっています。これも querySelectorAll で取り出すことができます。まずは要素をそのまま指定できますので「 input 」ですね。そして属性は角括弧で type を「 radio 」としてあげれば2つの要素ですね。「いる」「いらない」と2つありますので2つの要素の配列が返されます。またちょっと違った選択の仕方をしてみましょう。スクロールをしてみてこのあたりですね。「 id="artistlist" 」があります。id で指定することもできます。ただしこれもやはり専用のメソッド「 getElementById 」の方が処理は速いです。 でも使っても構わないので使いますが。id の場合にはハッシュマークですね。いげたです。いげたで「 artistlist 」とまず単独で確認しましょう。取れますね。単独でなくさらに selector を組み合わせたいという場合にはgetElementById ではなくこのquerySelectorAll あるいは querySelector の使いどころということになります。一旦クリアして artistlist の中のli 要素だという指定ができます。半角スペース1個ですね。そうすると li 1個だけが取り出せるということになります。そして li 要素の中には img があります。ここもやはり selector の書き方でli 要素の子どもの img をリストとして出しなさいという風にするとimg 要素だけを配列にして出してくれます。これは最後の人ですね。さらに selector を組み合わせることもできますので。一旦クリアをしますけれでも。例えばまたこちらですね。今度こちら article が違ってます。article は「 comingtoevent 」になってますね。「 artistlist 」とは別です。 でもこれを組み合わせてこちらの画像も持ってきたいということができます。上向き矢印で履歴を出して selectorと同じですから , で区切ってそしていげたの「 comingtoevent 」ですね。の img だということで確認してみますとスクロールしましょう。一番最後にこの画像が選ばれたということが分かります。このレッスンでは「 document.querySelector 」と同じく「 document.querySelectorAll 」という2つのメソッドの使い方をご紹介しました。いずれも引数に CSS の selector と同じように指定をしてそして querySelector の方はその最初の要素。querySelectorAll はすべての要素を配列で返すということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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