JavaScript: DOMを活用しよう

要素の中のテキストを操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の中に加えられているテキストを操作してみます。
講師:
04:13

字幕

このレッスンでは要素の中に加えられているテキストを操作してみたいと思います。Chrome でサンプルの練習用の HTMLドキュメントを開いていますがデベロッパーツールを開きます。そして画面を少しスクロールをしてこの「イベントについて」という辺りのテキストを操作しましょう。ではデベロッパーツールの左上のアイコンクリックしてこの領域 article ですね、article 要素を操作することにしましょう。少しスクロールしておきます。id がついていますのでgetElementById で要素を取り出して変数に入れます。変数は myNode としておきましょう。そして document.getElementById でid が abouttheevent ですね。Enter キーを押して取れたでしょうかmyNode を確かめます。article id abouttheevent 取れましたね。ではこの中のテキストだけを取り出します。まず調べてみますけれども、「 dir(myNode) 」と見てみますとオブジェクトとして中を確かめることができます。myNode にどんなものが入ってるかというとarticle ですね。 で id が abouttheevent なんですが三角をクリックすると中身が分かります。プロパティがいろいろあるようなんですが少しスクロールをしてinnerHTML 、これは中の HTML として取り出すタグ付きですね。その後に「 innerText 」とあります。こちらですとテキストだけを取り出すですね。但しタグが取れていますので「イベントについて」改行と後は本分 p 要素の中があります。これはいったん取って確かめてみましょう。クリアをして myNodeそして innerText ですね、そうすると「イベントについて」の本分なんですがこちらのブラウザーウィンドウでこう選んだと同じような感じですね。そしてコピーで取り出したいのは感じで取り出さます。そして上向き矢印で履歴を辿りますけど、innerText 設定するとこができるんですがここで設定しちゃいますとこの領域の全てが完全に書き換わってしまいますね。つまり article の中身が単なるテキストになってしまいます。こういう使い方をしたいことはあんまりないでしょう。どういう使い方をするかというとですね、まず myNodeそして firstElementChildという風にすると要素の最初のものが取り出せます。 見てみましょう。h2 「イベントについて」ですね。そうするとこの中のテキストを書き換えたいという場合はありゆるでしょう。いったんクリアをして履歴を上向き矢印で取ります。そしてその innerText ですね、をじゃあ英語にしちゃいましょう。abouttheevent と。今「イベントについて」は日本語になっていますが Enter キーを押すと「 About the event 」、英語に変わりました。このレッスンでは要素の中のテキストを取り出すというinnerText というプロパティをご紹介しました。設定も出来るんですが、その場合には要素を単独で使ってその中のテキストを書き換えるという使い方が良いでしょう。

JavaScript: DOMを活用しよう

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

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

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

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

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