JavaScript: DOMを活用しよう

ノードのテキストを操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノードのテキストをプロパティやメソッドで書き替えたり、加えたりしてみます。
講師:
06:44

字幕

このレッスンではノードのテキストをプロパティやメソッドで調べたり書き換えたり加えたいということをしてみたいと思います。Chrome でサンプル用の練習用のHTML ドキュメントを開いています。デベロッパーツールを開きましょう。そして少しスクロールをしてこの辺りのテキストを使いたいと思いますのでデベロッパーツールの左上のアイコンでarticle の要素を選択しました。これを使うことにしましょう。id がついていますので getElementByIdで取れますね。変数に入れます。myNode として「 document.getElementById 」「 abouttheevent 」ですね。なんか t とか e が重なっていてちょっと変な感じがしますけどEnter で取れましたでしょうか確認します。myNode article id = "abouttheevent"ということで取れましたね、ハイライトしていますので大丈夫の様です。ちょっとこれを開いてみましょう。そして少しスクロールをしておきます。この要素の中には h2 があって p 要素があってそして article が閉じています。ではまずプロパティを使って HTML のテキストを調べたいと思いますけど、myNode のまずは outerHTML外側の HTML ということなんですがこれで調べてみるとarticle から始まるタグ、そして合いタグまでテキストとして書き出されています。 outer があるだから当然inner があるだろうとその通りですね。「 innerHTML 」。そうすると article 要素の中の子要素h2 と p が取り出されました。このプロパティの書き換えも可能です。では上向き矢印で一回遡って innerHTML を書き換えてみます。では書き換えのテキスト、差し替えしましょうか。「差し替えの HTML 」ここが選ばれているですよね、現在 myNode として。Enter キーを押してみます。そっくり書き換えされました。上のペインでみてみると確かに article の中が差し替えの HTML でざっくりと書き換えされました。ということなのでもし書き換えを行う場合も例えば h3 とか p とかそういった要素として加えたいであればそのタグもこのテキストの中に入れてばいけないということです。HTML のテキストが差し替えられたままではなんですのでリロードをして元に戻します。ということは myNode の変数の値も消えましたので上向き矢印で遡っていってこれですね。改めて myNode に article の要素を設定します。スクロールももう一回やっておきましょう。 では使うメソッドなんですが、HTML のテキストを挿入するという命令です。insert挿入するですね、 Adjacentこれは隣り合ったということです。隣り合った所に HTML を挿入しているということでこれはメソッドですから丸かっこ丸かっこなります。第一引数があるんですがちょっと置いといて第二引数として追加する HTML のテキストを書きます。例えば「追加の HTML 」とこれもやはりタグが必要であればタグを追加します。ではここでは h3 にしましょう。そして h3 閉じと。最初の引数なんですが、これは挿入する場所の指定が出来ます。あんまり数が多くないですが、まずは見た方が分かり易いと思います。文字列で「 afterend 」と。最後の後ってことですね。何の最後かを確認しましょう。実際に Enter キーで設定しています。追加の HTML っていうのがこの article の後に入りましたね。afterend というのは article の閉じタグの後ということになります。では第一引数また変えてテキストを挿入したいと思いますけど、今度は p 要素にしましょうか。あんまり場所をとってもなんです。 p 要素にして afterend の反対ですね。before begin ですね。beforebegin 始めの前ということなので大体想像がつくでしょうかね。article の始まりタグの前に付きます。後もうちょっと第一引数のオプションがあるのでもう一個ぐらい試しておきましょう。では「追加の HTML その2」としてbegin は残して、before を after にしています。これで試します。そうするとこちでみたら分かり易いですね。article の始まりタグの後ということになります。このレッスンではノードをテキストとして操作するプロパティやメソッドをご紹介しました。プロパティは innerHTML と outerHTML 、メソッドとしては insertAdjacentHTML というものをご紹介したんですが第一引数については before と afterbegin と endの組み合わせの四通りの指定が出来ます。

JavaScript: DOMを活用しよう

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

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

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

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

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