JavaScript: DOMを活用しよう

ノードの複製と削除

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノードを複製するcloneNode()と削除するremoveChild()メソッドについてご説明します。
講師:
05:11

字幕

このレッスンではノード複製と削除についてご説明します。今 Chrome で練習用の HTML ドキュメントが開いています。そしてまずは複製からいきますけれども、写真のリストですね、これを複製したいと思います。ではデベロッパーツールを開きます。そしてこれがどこにあるかということでツールの左上の方のアイコンで選択してみるとクラス artistlist が定められたdiv 要素ということが分かります。この中に ul 要素があって、li が沢山あるということですね。ではこの div 要素をまず変数に取りましょう。「 var myNode 」ということで「 document 」クラスですから「 document.querySelector 」ですね。そして「 ' artistlist ' 」ということで myNode を一応確認しましょう。ul があって、 li があってと、大丈夫ですね。ではこれを複製してみたいと思います。複製にはまず複製したい myNodeですけどをターゲットとして対象として「 cloneNode 」というまさにそのままのメソッドがあります。そして Enter キーを押しますとクローンされました。 された結果が表示されているんですが、ちょっとへんですね。中が空っぽです。cloneNode のメソッドに何も渡さないあるいは false を渡すとそのノードだけを複製してくれて子供は複製されないです。子供も複製したいという場合にはtrue を入れます。そしてこれを変数にまた入れましょう。「 newNode 」とします。これで複製が出来ました。newNode childNodes を調べてみましょうか。childNodes とみてみると ul があり、その中に li あるということですね。ではこれをどこに持っていこうかとドキュメントの中に差し込みたいと思います。少しスクロールをしてこのあたりに持ってきたいと思います。またツールの左上のアイコンで選択してみるとid が設定されていますね。「 sidebar 」という id が設定されているこの中に入れたいと思います。ではクリアをして変数をまた定めます。「 targetNode 」としましょう。そして document の id が設定されていますからgetElementById ですね。そして sidebar と。targetNode の方も子供はどうなっているかchildNodes を調べてみることにしましょう。 この「スケジュール」の上に入れたいと思います。この「スケジュール」というのはここにあるようですね。そうすると順番は01234の前ということになりますね。では targetNode に対して追加します。insertBefore ですね。加えるのは newNode です。そしてどこに加えるかというと targetNodeの childNodesの4番の前でしたね。これで Enter キーを押しますと確かに追加されました。複製ですから前の方も残っていますね。前のは残った上で複製がここに入ったということです。今複製して加えた写真のリストのノードを削除したいと思います。その時は removeChild というメソッドを使うんですが1つ注意はお願は親にします。つまり newNode ですね、これを削除したい訳ですか、お願は親にしなければいけないのでparentNode をターゲットにします。そして removeChild 。削除するのは newNode ですね。そして Enter キーを押しますと削除出来ました。このレッスンではノードの複製と削除についてご説明しました。複製は cloneNode で、引数に true を渡さないと子供が複製されません。 それから削除は removeChild ですが、お願する相手は親だということにお気を付け下さい。

JavaScript: DOMを活用しよう

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

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

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

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

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