JavaScript: DOMを活用しよう

ノードの作成と追加

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メソッドdocument.createElement()でつくった要素を、appendChild()でノードに加えます。
講師:
07:26

字幕

このレッスンでは JavaScript コードを使って要素を動的に作りそれを HTML ドキュメントに加えてみたいと思います。今 Chrome で練習用の HTML ドキュメントが開いていますけれども、スクロールすると、もうちょっとですかね、写真側の一つ抜いてあります。ここに写真を加えたいと思います。ではデベロッパーツールを開いていましょう。そしてツールの左上にあるアイコンでこの少しこうむてな人を選びます。そうすると上ですね、li 要素があるのです。けれども img が差し込まれていない為に画像が表示されないということなのでimg 要素をメソッドを使って動的に作ってこのドキュメントに加えたいと思います。Dreamweaver で先程の HTMLドキュメントを開いています。スクロールをして先程のこあむてな人を探します。この人ですね。コードビューでハイライトされました。その上の li 要素が空っぽなのでこのイメージimg の要素と同じ様な要領で動的に img の要素を作りたいと思います。では上の画面はもう必要ないのでコードビューだけにしてこのタグは参考までにコピーしておきましょう。これと同じ様な設定をすればいいということですね。 下にスクロールするとスクリプトを書く場所がありますのでここにコメントで今コピーした要素を参考ようにペーストしておきます。こんな img 要素を中身を変えて作りたいということですね。ではまずエレメントを作ります。変数は myElement としましょう。そして document のメソッドです。ドットで「 CreateElement 」というまさにまんまの名前のメソッドはあります。そして引数には要素の文字列ですね。img を作りたいので img ということでimg 要素が造られます。そして設定をしていくわけですがmyElement ですね。src が必要です。こちらと同じ様にするというなので取り敢えずコピーを頂いてしまいましょう。そして名前が違いますので名前を変えます。ちょっと読み方が分かりません。それから alt も必要だということですね。これです。同様に myElementalt ですね。ここはもうコピーしなくてもタイプできそうです。「 Photo of 」でも名前はやっぱりコピーした方が良いですね。読みにくい名前なのでコピーを持ってきます。アンダースコアは半角スペースに置き換えます。 ちょっとスクロールしておきましょう。さらにカスタムデータ属性ですね。「 data-task 」というのがあるのでこれも加えます。「 myElement.setAttribute 」setAttribute ですね。そしてこれもコピーしなくても大丈夫でしょう。data-task というプロパティ、カスタムのプロパティを設定して値としては同じく「 speaker 」にします。この値で一回ブラウザーで確認しておきましょう。「 console.log(myElement) 」です。これで保存しておきます。Chrome でリロードします。そうすると造られたエレメントが表示されました。このこあむたの人の構成と同じ様に出来ましたね。では続きこのドキュメントに img 要素今作ったものを差し込みます。この為に今この li 要素がどこに入っているのかを確認しておきましょう。少し上にスクロールすると div 要素のクラスartistlist がありますね。その中の ul の中の li 要素そして0123456番目ということを覚えていてください。Dreamweaver に戻りまして li 要素をまとめて参照することにします。 この「 console 」はコメントアウトとしてきましょう。そしてこの li 要素のリストですね、それを入れる変数を宣言してdocument.querySelectorAll を使います。そして今確認した通り artistlist の中のul 要素の中の li ですね、これら全てを取って myNode の中に入れます。そして myNode の6番目、0からカウントしてですね、6番目ということを確かめましたのでここに要素を加えます。「 appendChild 」そして加えるエレメントですね、これを引数に指定します。これでまた保存しましょう。Google Chrome はまたリロードです。写真が変わりました。このレッスンでは JavaScript コードで要素を動的に作ってHTML ドキュメントに差し込みました。その時に使うメソッドとしてまず要素を作るのが CreateElement ですね。引数には要素を示す文字列を渡します。そして作ったエレメントはまだメモリにある状態なんですけれどもそれを実際に HTML ドキュメントに加えるには appendChild ということで加えたいエレメントを引数に渡せばいいということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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