コース: JavaScript 基本講座
今すぐコースを受講しましょう
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
要素をセレクタで選ぶ
このレッスンでは、 DOMの要素をCSSと同じ セレクターの形で 操作してみたいと思います。 今開いているDocumentなんですが、 一応ナビゲーションが header にあったりとか、 nav要素ですね。 それから h2 のタイトルがあって、 article ということで、 これは適当な文字なんですけれども、 footer があると、 簡単なページの構成になっています。 あと style のほうは、見栄えがするように 結構設定がしてあるんですが、 今回は、この style の内容については 触れません。 そして操作したいのは、今回は このh1要素ですね。 class logo と書いてあって、 Fixed Nav というテキストが 挿入されています。 もうひとつ、main-visual。 これは特にテキストは無いんですけれども、 領域が設定してあって、 カラーが塗られています。 それを操作したいんですが、 現在のページの見栄えを 確認してみましょう。 ブラウザを開くと、こんな感じです。 まず、class logo が設定してあった 「Fixed Nav」というテキストですね。 それがこれです。 このテキストを変えたいと思います。 あともうひとつは、 main-visualというIDが 設定してあったんですけれども、 それはこの領域です。 テキストは無くて、ただ領域を取って、 グラデーションのカラーが 塗られているだけなんですけれども、 これもカラーを変えてしまいましょう。 script要素は head の中にありますから、 DOMを操作するのには、 DOMのロードを待たなければなりません。 ということで、 document に対して、addEventListener で、 DOMContentLoaded ですね。 そして、 アロー関数式使いましょう。 {}ということで 改行します。 そして最後に ; ですね。 では要素を取っていきましょう。 まず、main-visual ですね。 これはIDですから、 getElementById が使えます。 変数宣言は const で行いまして、 main、ハイフンは使えません。 マイナスと間違えてしまいますから。 代わりに使うとすれば、 アンダースコアですね。 main_visual ということで、 document…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
目次
-
-
-
-
-
-
(ロック済み)
ECMAScript 2015の変数宣言7分19秒
-
(ロック済み)
ドキュメントのロードを待って処理する4分51秒
-
(ロック済み)
DOMのロードを待って処理する4分55秒
-
(ロック済み)
要素をセレクタで選ぶ5分55秒
-
(ロック済み)
複数の要素を選ぶ7分6秒
-
(ロック済み)
要素を削除する4分44秒
-
(ロック済み)
要素をつくって加える3分55秒
-
(ロック済み)
要素にクラスを追加する5分17秒
-
(ロック済み)
要素のクラスをフラグで切り替える6分2秒
-
(ロック済み)
要素のクラスを切り替えるメソッド2分50秒
-
(ロック済み)
スクロールに応じて要素のクラスを変える3分44秒
-
(ロック済み)
jQueryでドキュメントの準備を待つ6分14秒
-
(ロック済み)
jQueryでスクロールに応じて要素のクラスを変える6分1秒
-
(ロック済み)
Vue.jsでデータをバインディングする6分47秒
-
(ロック済み)
Vue.jsでクリックしたらデータを処理する6分27秒
-
(ロック済み)
Vue.jsでクラスをバインディングする6分38秒
-
(ロック済み)
-
-