JavaScriptプログラミング入門講座

ノードの追加と削除

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptを使って、HTML文書内に、新たにHTML要素(ノード)を追加したり、削除したりする方法について解説致します。
講師:
10:03

字幕

このレッスンでは JavaScript で HTML 文書に ノード つまりは HTML タグを 追加する方法 および削除する方法 について解説いたします まずはダウンロードしてきた ファイルの中にある child と書かれた― HTML ファイル JavaScript ファイル CSS ファイル これらのファイルを エディタで開いておいてください そしてこれが それらのファイルを開いた状態です この HTML ファイルは 外部ファイル化した JavaScript ファイルと CSS ファイル これらを読み込んでいる状態のものとなります またこの タグの中には 既にいくつかの HTML タグの 要素が書かれている状態となっております ちなみに JavaScript ファイルを 読み込んでいるところは この タグの直前となっているので こちらも合わせて注意しておきましょう それでは これらのファイルを使いながら 今回のレッスンを始めていきたいと思います さて それではまず この HTML 文書に JavaScript で HTML タグ― いわゆるノードを追加する方法について 見ていきたいと思います まず確認のため この HTML ファイルを ブラウザで開いてみましょう これを開きますと 今このような形の 見栄えになっていますね それでは 今回こちらの インプットボックスの下 このあたりに1つ JavaScript で HTMLタグ― ノードを追加してみたいと思います それではエディタに戻ります そして JavaScript ファイルを開きます それでは HTML タグ いわゆるノードの追加の方法について 実際に書いていきたいと思います まずは その追加するノード― 要するに HTML タグを JavaScript で 生成してあげないといけません まずはここから書いていきます まず変数を1つ追加 名前をここでは elem としておきましょう そして = この次に document.create Element( ); そしてこの createElement の引数に 追加したい HTML タグ名を書きます 今回は P タグを追加したいとします その場合はこのように ダブルクオーテーションの "p" と書きます そうすると この elem という変数の中に 作成された P タグの要素が入りました それでは次にこの P タグの中 P タグの始まりから P タグ閉じるまでの 間に入れ込むデータを作成します その場合はこのようにします こちらの変数 elem. と書いて innerHTML と書きます そして = そして ダブルクオーテーション そして セミコロン そして このダブルクオーテーションの中に 入れ込みたい文字列を書き込みます 例えば "これは追加されたPタグです。" としておきましょう では 後はこの新しく作成した P タグを HTML の文書に追加する方法を書きます まず 追加したいところを書きます document.body. そして appendChild( ); そして この appendChild の引数の中に 先程作成した elem と入れます こうすることによって この HTML 文書の タグの 一番最後に この新しく作成した P タグを appendChild 追加する という処理ができました それではこの状態でファイルを保存して この HTML ファイル ブラウザで確認してみたいと思います こちらを開きますと このように 先程のインプットボックスの下に 「これは追加された P タグです。」 というのが増えていますね それではエディタに戻ります ちなみにこの document.body. と 書かれているところは 新たに作成した このノードを 追加したい場所を記入します ですので 今は例えば body としていますが 他の場所に追加することも可能です その場合は親要素となるノードに対して getElementById などで 要素を取得した上で こちらに記入すると良いでしょう また この作成した P タグですが こちらの属性に関しても この createElement 要するにノード作成時に 指定してあげることが可能です 例えば このようにやります 同じように 変数 elem. と書いて setAttribute( ); そして まず1つ目の引数には 設定したい属性の名前 ここでは "class" としておきましょう そして その後に実際の設定値を書きます ここではサンプルとして "purple" と書いておきます そして この状態で一度ファイルを保存して ブラウザで開いてみましょう ブラウザで開くとこのように 「これは追加されたPタグです。」 という形で 文字色が紫になっていますね これは class の purple というものに CSS ファイルで文字色が紫になるように 指定しているからです このように新たにノード― いわゆる HTML タグを追加する際には その属性も合わせて設定することが可能です それではエディタに戻ります では次に HTML タグ いわゆるノードの削除の 仕方について見ていきたいと思います HTMLタグ(ノード)の削除ですね ノードの削除はこのようにやっていきます まずは 変数を作ります そして変数の名前 今回は target としておきましょう そして = ここで 削除したい要素を JavaScript で指定してあげます 今回は document.getElementById( ); そして ここに ID の名前 "red" と書いておきます ここで getElementById で ID が "red" の要素を取得しましたね その要素を target という変数に 入れ込んでいます 一度 HTML ファイルを開きます すると こちらのものですね この id="red" が付いた P タグを 削除するというふうに持っていきます ちなみにこの p id="red" というのは ブラウザで確認してみると この赤い枠の部分です それではエディタに戻って そして JavaScriptのファイルに戻ります それでは実際に消してみます 消すためには― まず document.body. そして removeChild( ); そして この中に target と書きます それでは この状態で保存をして ブラウザで開いてみましょう すると― このように 先程の赤い枠が無くなっていますね それではエディタに戻ります このような形で削除する場合には removeChild というものを使います この部分にはその removeChild を 含んでいる場所の― その親ノードに当たる 場所を書いておけば大丈夫です そしてこの引数には 削除したい要素を書きます 以上で今回のレッスンは終了です 今回は JavaScript で HTML 文書に― HTMLタグ いわゆるノードを 追加したり 削除したりする方法について 解説いたしました これをマスターすると Web ページの内容を 動的に変更することなどが できるようになりますので しっかりと覚えておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

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

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

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

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