DOM操作

こんにちは、かつコーチです。前回は、HTML要素に独自データを持たせるdata属性の活用方法を解説しました。今回はDOM操作基礎シリーズの締めくくりとして、パフォーマンスに関する注意点を扱います。「動くには動くけど、なんだか画面がカクつく」...

こんにちは、かつコーチです。前回は、フォームの入力値を取得する方法を解説しました。今回は、HTML要素に独自の情報を持たせられる「data属性」の活用方法を扱います。data属性を使いこなせるようになると、「HTML側にデータを持たせて、J...

こんにちは、かつコーチです。前回は、イベントの伝播（バブリングとキャプチャリング）について解説しました。今回は、多くのWebサービスで必ず出てくる「フォームの入力値を取得する」方法を扱います。お問い合わせフォーム、検索ボックス、ログイン画面...

こんにちは、かつコーチです。前回は addEventListener の基本的な使い方を解説しました。今回は一歩進んで、「イベントがどう伝わっていくか」という仕組みを扱います。このバブリングとキャプチャリングを理解していないと、「なぜかクリ...

こんにちは、かつコーチです。前回は、JavaScriptからスタイルを操作する方法を解説しました。今回のテーマは「イベント」です。ボタンをクリックしたら何かが起きる、フォームに入力したら文字数が表示される。こういった「ユーザーの操作をきっか...

こんにちは、かつコーチです。前回はclassListを使ったクラスの操作を解説し、「見た目の切り替えはCSSに任せ、JavaScriptはクラスの付け外しに専念する」という考え方を紹介しました。とはいえ、実務では「マウスの位置に合わせて要素...

こんにちは、かつコーチです。前回は要素の追加・削除を解説しました。今回は、Webサイトでよく見る「メニューを開閉する」「タブを切り替える」「ボタンを押すと選択状態になる」といった動きの土台になる、クラスの操作方法を扱います。見た目の変化はC...

こんにちは、かつコーチです。前回は querySelector を使って、DOMツリーの中から目的の要素を取得する方法を解説しました。今回は一歩進んで、DOMツリーそのものに新しい要素を追加したり、不要な要素を削除したりする方法を扱います。...

こんにちは、かつコーチです。前回はDOMの仕組みについて解説し、DOM操作は「要素を取得する」→「要素を操作する」の2ステップが基本だとお伝えしました。今回はその1ステップ目、「目的の要素をどうやって探し出すか」を扱っていきます。要素の取得...

こんにちは、かつコーチです。前回までは、変数・条件分岐・繰り返し・関数・配列・モジュールといった、JavaScriptそのものの文法を扱ってきました。ここからは少し毛色が変わります。今回からは、JavaScriptを使って実際に「画面を動か...