JavaScript: DOMを活用しよう

classListプロパティでクラスを操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
classListプロパティで、要素にクラスを加えたり、除いたり、あるなしを調べたりしてみます。
講師:
05:29

字幕

このレッスンでは classList というプロパティを使って要素にクラスを加えたり除いたりあるなしを調べるといったことを試して見ます。Chrome で練習用のサンプルファイルを今開いています。ではデベロッパーツールを表示しましょう。そしてウィンドウを少し下にスクロールします。この id ですかね。この最初の人を選択したいと思いますので確認のためにデベロッパーツールのウィンドウの左上のアイコンで選択をしています。img の要素が選択されました。それは div 要素 artistlist の中にありますのでそこで絞り込めばいいでしょう。変数に入れたいと思います。変数は var myNode として「 document.querySelector 」ですね、先頭のものを選択します。artistlist そして img ということでmyNode を確認します。確かに先頭の人の写真が選択されるんです。では一旦クリアをして、今回使うプロパティというのはノードに対してclassList というプロパティでクラスのリストを参照します。見てみましょう。空っぽです。これ配列で表示されるんですけどリストという名前の通り複数いれることができるですがこの img 要素にはクラスは一個もありません。 ですからクラスのあるものを確かめてみたいと思いますが親の ul 要素ですね、 img の親のli の親の ul 要素ということですからmyNode の parentNode が li ですね、さらに parentNode これで ul が取れるはずですのでclassList を見てみましょう。一個だけ入っています、「 group 」。確かに group が入っています。確認できますしたので myNode の方で確かめてみたいと思います。myNode で今クラスはありませんね。classList クラスを加えましょう。add というまかまのメソッドです。そして「 faded 」クラスでにCSS で設定がしてあります。ですからこのクラスが加わればその設定がこの写真に影響すると適用されるということになります。Enter キーを押すと薄くなりました。影の薄い写真になっちゃいましたけどクラスの方には faded というのは入りました。もう一個ぐらいを加えてみましょう。これも CSS ですでに設定がしてあるんですけど「 pulse 」です。なんとなく名前で想像がつくでしょうか。確認しましょう。ドキドキしている感じですね。 これも pulse というアニメーションの設定してある CSS クラスが設定されました。では pulse を除いてみたいと思います。上向き矢印でコンソールから履歴を取ってadd の反対大体想像がつくでしょうね。remove です。これで pulse が除かれます。でもまだ faded が残っていますね。faded はまた履歴を辿りますけれども上向き矢印で今度は remove じゃなくて「 toggle 」と。これはオン・オフの切り替えになります。設定はされていれば削除され、されていなければ追加されます。確認しましょう。faded は現在持っていますということはEnter キーを押すと除かれるので元の状態に戻りました。では今適用されていないまた履歴を辿って「 hidden 」名前で大体なにが起こるか見当つくと思いますけど、消えてしまうと、という設定が CSS で加えていますのでその hidden のクラスの CSS が適用されたということです。クラスが設定されているかどうかを調べることも出来ます。また上向き矢印で履歴を辿りますがhidden が入っているかどうかリストの中にですね。「 contains 」単数形なのでcontains の s が付きます。 そうすると hidden はありますよね。でも履歴を辿って fadedこれはすでに削除されていますのでないはずです。false ということで true false でcontains によって適用がされているかされていないかを調べることができます。このレッスンでは classList というプロパティを使ってそこにクラスを設定したり削除したりということをご紹介致しました。クラスを加えるには classList に対して add除くのは removeオンオフは toggle あるかどうか contains ということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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