JavaScript: DOMを活用しよう

クリックしたオーバーレイを削除する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動的に配置した要素を、クリックでHTMLドキュメントから削除します。
講師:
03:56

字幕

このレッスンでは動的に配置した要素をマウスクリックでHTML ドキュメントから削除したいと思います。作業するページは「 ARTIST 」というページです。ここでサムネールの画像をクリックすると背景が暗くなりましてそして画像が中央に配置されます。今クリックしても何も起こりません。もう一回リロードして、ではデベロッパーツールを表示しましょう。画面を少しスクロールします、水平に。そしてもう一度画像をクリックします。そうすると div 要素が出来上がってその中に画像の img 要素が入っています。後ろの半透明のグレーのこの div 要素何ですね。ここに rgba で黒い 0.7 70% の半透明のdiv 要素として配置されている訳です。この div 要素の方をクリックしても画像毎消えてしまうようにしたいと思います。ではいったんリロードしておきます。Dreamweaver で HTML ドキュメントを開きました。img 要素は動的に作成してパスであるとか style などを設定した上で読み込み終わったときサイズを調整してそしてオーバーレイの子供として加えているということですね。クリックしたらなんですが画像 img でもオーバーレイでもどらでもいいということであればオーバーレイの方にクリックのEventListener を加えたいと思います。 ではここに付け加えましてオーバーレイコピーを持ってきます。そして addEventListener ですね。クリックしたら何引数に function です。そして function 引数を受け取るんですが今回はとくに使わないので空っぽにしておきます。そして中括弧と丸かっこを閉じってセミコロンということですね。クリックしたらオーバーレイを削除したいんですが削除は removeChild 。これは親に対して子供の要素を削除して下さいという風にお願いしないといけないのでオーバーレイ直でありません。オーバーレイをコピーしてparentNode ですね、に対して removeChild 。削除したいのはこのオーバーレイです。親に対して子供の自分を削除して下さいという風にお願する形になります。では保存しましょう。では Chrome をリロードして画像をクリックします。そして画像をもう一度クリックすると消えてなくなるということですね。違う画像にしましょう。配置の部分、オーバーレイの部分であってもクリックすると消えてくれます。もう一個ぐらい試しましょうか。オーバーレイの部分をクリックです。大丈夫ですね。 このレッスンでは動的に配置した要素今回は div 要素ですけど、それをマウスクリックで HTML ドキュメントから削除する方法についてご説明しました。今回は overlay という名前のついた変数に入ったdiv 要素に対して addEventListener でクリックイベントの Listener 関数を定義しその中でオーバーレイ div 要素を削除するんですが注意は親のノードに対して removeChild のメソッドを呼び出してそして自分を渡すということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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