JavaScript: DOMを活用しよう

ノードの置き換え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノードを置き替えるreplaceChild()メソッドについてご説明します。
講師:
03:16

字幕

このレッスンではノードを置き換えるメソッドについてご紹介します。今 Chrome で練習用の HTML ドキュメントが開いていますけれども、どこをどこで置き換えるというとこの「注目アーティスト」という記事ですね。この部分を「イベントへの参加について」に置き換えてしまいます。この「イベントへの参加について」を置き換える、つまりこれが消えてしまって、注目アーテイストがここに変わって入るというになります。ではデベロッパーツールを開いて場所を確認しましょう。ツールのウィンドウの上の方のアイコンでこの「注目アーティスト」なんですけれどもarticle の要素で id が設定されています。「 featuredartists 」。まずこれを変数に取ってことにしましょう。「 var myNode.document 」id ですから getElementById ですね。そして「 featuredartists 」大丈夫でしょうか、確認しましょう。myNode 取れましたね。今度は置き換える先ですね、ターゲットです。ではこれはまたスクロールをしていてまたこの左上のアイコンで確認するとこれもむまた id が設定されています。 「 comingtoevent 」ですね。同じ様に変数に設定します。変数は「 var targetNode 」としましょう。「 targetNode 」として「 document.getElementById 」ですね。そして「 comingtoevent 」ということでこちらも確認します。targetNode 大丈夫ですね。では置き換えるメソッドです。replaceChild というメソッドなんですがこのメソッドは親に対して工作するようにお願するという形になります。だから targetNode を置き換えるんですがお願するのはその親になります。parentNode に対して replaceChildそして myNode で置き換えましょうと。置き換える先ですね、 targetNode です。targetNode を myNode で置き換える。ということで Enter キーを押しますとartistlist が消えてこちらに置き換わってということです。このレッスンではノードを置き換えるメソッドreplaceChild をご説明しました。その時にこのメソッドのターゲット参照するのは親だということにご注意下さい。 そして引数はどのノードでどこを置き換えるのかという指定になります。

JavaScript: DOMを活用しよう

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

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

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

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

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