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

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メソッドで出力します。

JS コード例

// 各HTML要素を取得
let content_area = document.getElementById("content_area");
let h1_element = content_area.querySelector("h1");
let p_element = content_area.querySelector("p");
let input_element = content_area.querySelector("input[name=input_name]");
let 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要素のような埋め込みコンテンツについてはテキストに含まず、その他のフローコンテンツのテキストのみ取得します。

JS コード例

let content_area = document.getElementById("content_area");
let 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コードは冒頭と同じものを使用します。

JS コード例

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

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