JavaScriptのイベントを理解する

イベントでDOM要素をHTMLドキュメントから除く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
removeChild()メソッドで子要素を削除できます。また、parentNodeプロパティは親要素を参照します。
講師:
07:20

字幕

このレッスンでは htmlドキュメントの中の要素を イベントで削除する方法について ご紹介します 今画面に サムネールのような 画像が9つ並んでいますけども これはクリックしたものが 削除されるという javaコードが書いてあります 例えば初めの方の画像を削除すると 全部順番が詰まってくるんですけども どれでもクリックしたものが削除されて 最後にすべてなくなるということです このようなコードをどのように イベントを扱っていいかということを これからご説明します ドリームウィーバーで開いている htmlドキュメントは まだ要素をドキュメントから削除する というjavaコードは書いていません ただし基本的な設定だけ とりあえずしてありまして ボディ要素には オンロード属性で initという関数を実行するようにという 指定になっていて エラーにならないように スクリプト要素の中に initという関数の 外側だけですね、書いてあります 何も起こりませんけども 確認をしておきましょう ファイルから ブラウザーでプレビューします クリックしても何も起こりません けれども 基本的な設定だけはしてありますので 開発管理で javascriptコンソールを 見てみると 特にエラーも起こりません では クリックした要素を ドキュメントから削除する というコードを書き加えていきましょう javaコードは このファンクションinitの中に 書いていくわけですけども イベントリスナー クリックのイベントリスナーを 設定します どこに設定するかというと このリスト要素の中、li要素の中に IMG要素があって これを削除するんですが イベントリスナーは その親である ul要素に設定したいと思います クラスとしてgrid という名前が定められています まずこのエレメントを取らないといけません ドキュメントですね そして ID属性であれば get element by ID を使うんですが今回はクラスです その場合には クエリセレクター というメソッドを使います そしてここでクラス名を 入れようとすると コードコンプリーション コード保管でgridと出てきますね クラスが選べます これで このgridというul要素が取れますので それに対してアドイベントリスナーですね アドイベントリスナーで クリックしたらです クリック そして 名前のないファンクション 続けて書いてしまいましょう ファンクションで イベントリスナーオを受け取ります そして中カッコ始まり中カッコ閉じで 丸カッコを閉じておいて この中に エレメントを削除する 要素を削除するという コードを書くんですが 要素をどうやって探そうかということですね まず順番に確認していきましょう ターゲットという 変数を用意して 何を調べるかというと このイベントオブジェクトコピーします コピーしてここに持ってきて ターゲットというプロパテイl これで イベントの起こったエレメント 要素がわかります コンソールで調べましょう console.logで ターゲットに何が取られたか ということですね コピーして持ってきます 1回保存しましょう 保存をして ブラウザーでプレビューです console.logですから 開発管理で javascriptコンソールを 表示しておきます 右下のこのサムネールをクリックしますと IMGですね イメージの要素が捕らえた ということがわかります Altには このような名前がついています ポインターを合わせると こちらの画像がハイライトされますから これが選ばれたんだな ということがわかります ではこのIMG要素を削除するか というと それはちょっと都合がよくないです ではhtmlドキュメントの方に 戻りましょう ターゲットのIMG要素だけを直接削除すると リスト要素が残ってしまいますね このリスト要素 エラー要素ごと 削除したいと思います ですので さらにその親を見るわけで 親のノードを見るわけですね リムーブノードとい変数を設けて そしてこのターゲットは 画像、IMG要素をクリックすると IMGなんですけども そのペアレントノードと いうものを調べる 取り出すと これがリスト要素となります やはりここも確認しておきましょう 1回コピーをして ペーストして 1回保存してから ブラウザーでプレビューします また javascriptコンソールを 表示しておきましょう そしてさっきと同じ画像を クリックしますと 今度はエラー要素が選ばれました ですからこれを削除すれば li要素ごと 要素がul要素 親要素から除かれるということになります そういうコードに書き換えます このconsole.logは 一旦削除します そして使うメソッドなんですが リムーブチャイルド というメソッドを使います 子の要素を除くわけですね そしてその前に参照するのが どこから削除するかということです どこからかというと 今リムーブノード これはli要素を取ってくるんですが それのさらに親ですね ですから リムーブノードを コピーして持ってきて そのさらに ペアレントノードと から削除する という形になるわけです では確認しましょう ファイルを 保存して ブラウザーでプレビューです 1番右下クリックすると 消えますね では今度は1番左上 どんどんクリックしたものが消えて 順番はつまっていきます そしてすべて なくなりました このレッスンでは マウスのクリックのイベントで htmlドキュメントの中の 要素を削除するという方法について ご紹介しました その場合はまずターゲット というプロパティで 何がイベントを起こしたのか ということを調べ 必要に応じて ペアレントノードというプロパティで 親要素を参照していく そして削除するメソッドは リムーブチャイルドでした

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

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

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

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

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