コース: JavaScript 基本講座
今すぐコースを受講しましょう
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
複数の要素を選ぶ
このレッスンでは、 複数のDOM要素を取り出すメソッドを ご紹介したいと思います。 今開いているHTMLDocument なんですけれども、 DOMの操作をしています。 ひとつ目は、main-visual というIDが 設定されている div要素ですね。 これを getElementById で取ってきて、 変数に入れています。 もうひとつは logo という、 これは class ですね。 クラスが設定されたh1の要素、 これを querySelector というメソッドで 取り出して、 変数に入れて、それぞれについて document をクリックしたとき、 main_visual については setAttribute で、 style属性に background のカラーを変える、 darkblue ですね。 ダークブルーにする設定がしてあります。 それから、logo のほうについては textContent、 Fixed Nav が最初入ってるんですが、 それを Navigation に変更すると いうことになっています。 動きを確認しておきましょう。 この「Fixed Nav」というテキストが クラスロゴで、 背景のこのグラデーション、 こちらがメインビジュアルの領域ですね。 クリックすると 「Fixed Nav」が「Navigation」に変わり、 背景がダークブルーになりました。 さらに、この3つのテキストも 取り出してみたいと思います。 3つのテキストは このli要素の中にあるんですけれども、 これを取り出す前に、 クラスから要素を取得するというメソッドを この querySelector 以外に もうひとつご紹介しておきましょう。 ということですので、これはコピーして、 そしてペーストして、 元のやつはコメントアウトですね。 こうしておいて、 document に対して querySelector ではなくて、 getElementsByClassName というのがあるんですね。 それからもうひとつ細かい 注意ですけれども、 getElements と「s」がついています。 つまり複数形なんですね。 ということで、 これで確認してみたいんですが、 クラスと決まってますから、 クラスを示すドットは入れてはいけません。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
目次
-
-
-
-
-
-
(ロック済み)
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秒
-
(ロック済み)
-
-