2章 テキストの操作

1章では要素の取得について学びました。本章では取得した要素オブジェクト(HTMLElement)を使って、要素内のテキストの操作をしていきます。具体的には、テキストの取得・変更(追記)・削除を扱います。

2.1 テキストの取得

要素内のテキストは要素オブジェクトのtextContentプロパティでアクセスできます。

var text = element.textContent;

elementは要素のオブジェクトです。これは1章で学んだquerySelectorなどの関数で取得します。そして、textContentプロパティを使ってテキストの取得ができます。

具体例で確認します。

<p>こんにちわ</p>

pタグ内のテキスト(こんにちわ)を取得することを考えます。要素オブジェクトを取得して、textContentプロパティを参照します。

//p要素を取得
var p = document.querySelector('p');

//テキストをアラート表示
alert(p.textContent);

これでアラートに「こんにちわ」が表示されます。

TIP

補足として、以下のように要素内にテキストとインライン要素が入っているときのtextContentプロパティの挙動を確認しておきましょう。

<p>あいうえお<span>アイウエオ</span></p>

ここでp要素のtextContentプロパティを参照すると、何が取得できるのでしょうか。「あいうえお」なのか、「アイウエオ」なのか。もしくは...。

結論を言うと、「あいうえおアイウエオ」が取得されます。要素内のテキストを取得すると、中のインライン要素内のテキストも含めた文字列を取得する仕様になっています。

2.2 テキストの変更

element.textContent = 'Hello';

テキストの変更はtextContentに値を代入するだけです。textContentに値を代入するので、既存のテキストは上書きされてしまうことに注意しましょう。

具体例で確認すると、

<p>こんにちは</p>
//p要素を取得
var p = document.querySelector('p');

//テキストを変更
p.textContent = 'Hello';

これでHTMLにはこんにちわと書いてあっても、JavaScriptで上書きされているのでHelloが表示されます。

2.3 テキストの追記

テキスト変更のバリエーションとして、追記を考えます。textContentプロパティへの代入は既存のテキストを上書きしてしまいますが、既存テキストに対して追記したい場合もあるでしょう。追記は変更の応用で実現できます。

element.textContent += '追加テキスト';

+=演算子を使うことで、既存のテキストの末尾に新たなテキストを追記することができます。

<p>Hello</p>
//p要素を取得
var p = document.querySelector('p');

//テキストを追記
p.textContent += ' World';

2.4 テキストの削除

次はテキストを削除することを考えます。実はこれも変更の応用で実現することができます。テキストを削除することをテキストを空文字に変更すると考えます。つまり、textContentに空文字を代入することでテキストを削除することができるのです。

element.textContent = '';

実際にやってみましょう。

<p>こんにちは</p>
//p要素を取得
var p = document.querySelector('p');

//テキストを削除(空文字に変更)
p.textContent = '';

2.5 まとめ

この章では要素内のテキストの様々な操作を学びました。とは言っても覚えるべきことはtextContentのみです。textContentプロパティで要素内のテキストを参照できることを知っておけば問題ありません。

Last Updated: 2018-5-10 17:49:38