JavaScript

レシピ

HTML・DOM

HTML要素内のテキストを取得、編集する

HTML要素内にあるテキストを取得したり、編集する方法について解説します。

この記事のポイント

  • h1要素p要素のようなテキストを持つ要素はtextContentプロパティでテキストを取得、編集する
  • フォームに使うinput要素textarea要素valueプロパティでテキストを取得、編集する

目次

HTML要素のテキストを取得する

HTML要素が持つテキストを取得したり、編集するときはtextContentプロパティvalueプロパティを使います。

h1要素p要素のようなテキストを持つ要素はtextContentプロパティ、フォームに使うinput要素select要素textarea要素などはvalueプロパティを使います。

今回は以下のHTMLコードを使って、それぞれのプロパティからテキストを取得したり編集を実行していきます。

HTMLコード例

<article id="content_area">
	<h1>HTML要素のテキストを取得、編集する</h1>
	<p>テキストテキストテキスト</p>
	<form>
		<input type="text" name="input_name" value="input要素の入力データ">
		<textarea name="textarea_contact">textarea要素の入力データ</textarea>
	</form>
</article>

以下のコードではまずid属性content_area」の中にある各HTML要素を取得して、textContentプロパティvalueプロパティを使って要素内のテキストを取得してconsole.logメソッドで出力します。

コード例

// 各HTML要素を取得
var content_area = document.getElementById("content_area");
var h1_element = content_area.querySelector("h1");
var p_element = content_area.querySelector("p");
var input_element = content_area.querySelector("input[name=input_name]");
var textarea_element = content_area.querySelector("textarea[name=textarea_contact]");

// テキスト系のHTML要素
console.log(h1_element.textContent); // HTML要素のテキストを取得、編集する
console.log(p_element.textContent); // テキストテキストテキスト

// フォーム系のHTML要素
console.log(input_element.value); // input要素の入力データ
console.log(textarea_element.value); // textarea要素の入力データ

なお、h1要素p要素の中にテキスト以外にem要素span要素img要素のようなフローコンテンツが含まれる場合についても、テキストのみを取得します。
例えば、以下のようにフローコンテンツを含むp要素textContentプロパティを参照すると、「テキストテキストテキストリンクテスト」のようなテキストのみを取得することができます。

HTMLコード例

<article id="content_area">
	<p>テキスト<span>テキスト</span><em>テキスト</em><img src="./image/rhinos.png" alt="テスト"><a href="#">リンクテスト</a></p>
</article>

こちらのp要素からtextContentプロパティでテキストを取得すると、img要素のような埋め込みコンテンツについてはテキストに含まず、その他のフローコンテンツのテキストのみ取得します。

コード例

var content_area = document.getElementById("content_area");
var p_element = content_area.querySelector("p");

console.log(p_element.textContent); // テキストテキストテキストリンクテスト

HTML要素のテキストを編集する

HTML要素のテキストを編集するときは、textContentプロパティvalueプロパティに対して新しいテキストを代入します。

上記のテキストの取得と同様に、h1要素p要素のようなテキストを持つ要素であればtextContentプロパティに対してテキストを代入し、フォームに使うinput要素select要素textarea要素などに対してはvalueプロパティにテキストを代入することで編集することができます。

以下の例はid属性content_area」の中にある各HTML要素を取得し、その後にtextContentプロパティvalueプロパティに新しいテキストを代入することでテキストの編集を行います。
使用するHTMLコードは冒頭と同じものを使用します。

コード例

// 各HTML要素を取得
var content_area = document.getElementById("content_area");
var h1_element = content_area.querySelector("h1");
var p_element = content_area.querySelector("p");
var input_element = content_area.querySelector("input[name=input_name]");
var textarea_element = content_area.querySelector("textarea[name=textarea_contact]");

// テキストを編集する
h1_element.textContent = '見出しテキストを変更';
p_element.textContent = 'テキストを変更';
input_element.value = '1行テキストの入力データを変更';
textarea_element.value = 'テキストエリアの入力データを変更';

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。