JavaScript: DOMを活用しよう

insertBefore()メソッドでノードを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
insertBefore()メソッドで、テキストノードを指定の位置に加えます。
講師:
05:20

字幕

このレッスンでは動的に作ったテキストノードをドキュメントの指定した位置に加えてみたいと思います。今練習用の HTML ドキュメントが開いているんですがこれはトップページですけど、今回はこの「 VENUE/TRAVEL 」というページで試すことにします。そして加えたいのはこの「開催場所」の所です。この場所はどうなっているかを確認しましょう。デベロッパーツールを開きます。そしてこの左上のアイコンでこれがどこだろうというと articleの要素で id が付いていますね。「 thevenue 」という id が付いていまして、その中に h2 要素p の要素が2つということになっています。ではまず取り敢えずテキストノードを作って加えたいと思います。Dreamweaver で HTML ドキュメントを開きました。ボディの下の方ですね。script 要素の場所だけとってありますのでここで JavaScript コードを書いていきます。まずは先程の article のノードですね。「 document.getElementById 」そして id か゛thevenue でしたのでこれを入力して閉じます。 次に動的にテキストノードを作ります。テキストノードを作るにはまず変数を宣言しますけれども、「 createTextNode 」というまさにその為のメソッドがあります。そしてテキストを打ちます。このテキストを追加するとクオテーションを閉じてそして myNode に加えればいいですね。「 appendChild 」そして「 myText 」テキストノードを加えます。あ、小文字になっていますね。Text ということで保存しましょう。Chrome でリロードをします。そうすると確かにテキストが加えましたけど、位置もおかしいし、スタイルも他と違いますね。あるかと言いますと、 appendChild でテキストノードを加えました。それがこのテキストなんですけれども、まさにただ単純のテキストが一番最後に、この article の一番最後に加わったといことでp 要素の中に入ってないですね。ですからスタイルで揃えたのであればp 要素囲んであげなければいけないと。後イチゴですね、今度はこの2つのパラグラフの間にもってきたいと思います。その場所を指定するメソッドがありますのでそれを使いたいんですが0番1番2番とこう数えてはダメです。 他にはノードはこの article に含まれていますので見てみましょう。「 myNode.ChildNodes 」です。そうすると見えませんけど、空白の改行などをノードとしてカウントされますので012345のまえですね。Child の5番目の Child の前に持って来れば2つのパラグラフの間にくるということが分かりました。Dreamweaver に戻ってまず p 要素を作りましょうね。「 pNode 」とします。「 document.CreateElement 」です。そして p 要素ですからp という風に指定します。その上で myNode を pNode に変えればp 要素の中にテキストが入ります。でもまだこれはドキュメントに入っていませんね。ドキュメントに入れるには myNode に対して位置を指定して追加するというメソッドがあります。「 insertBefore 」どれの要素の前という風に指定します。まずはインサートする、挿入するノードを指定します。pNode ですね。そしてどこにいれるというと myNode のchildNodes の5番目です。5番目の before 前に insert 挿入するということですのでこれで保存しましょう。 Chrome をもう一度リロードします。そうすると2つのパラグラフの間に入りました。そして見てみるとちゃんと p 要素に囲まれていますからスタイルも揃っています。このレッスンではテキストノードを動的に作ってそれをドキュメントの指定の場所に加えるという方法についてご説明しました。テキストノードを作るのはcreateTextNode 。そして指定をして追加するという場合にはinsertBefore で第一引数が加えるノード。そして第二引数にどこどこの前ということを指定する為の要素の場所を入れるということでした。

JavaScript: DOMを活用しよう

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

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

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

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

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