HTML要素の属性を取得、編集する

HTML要素の属性を取得する

HTML要素が持つ属性を取得するときはプロパティを使うか、getAttributeメソッドを使います。
例えば、あるHTML要素からid属性の値を取得するときは、「element.id」のようにプロパティとして取得するか、「element.getAttribute("id")」のようにメソッドを使って取得することができます。

今回は以下のHTMLコードを使って、それぞれのHTML要素の属性を取得したり編集を実行していきます。

HTML コード例

<form>
	<input type="text" id="input_name" name="input_name" class="form_element" value="test" placeholder="ここに名前を入力してください">
	<select>
		<option value="1">OP1</option>
		<option value="2">OP2</option>
		<option value="3">OP3</option>
		<option value="4" selected="selected">OP4</option>
		<option value="5">OP5</option>
	</select>
	<input type="submit" id="btn_submit" name="btn_submit" class="form_element" value="送信">
</form>

次のコードでは、まずform要素の中にある各HTML要素を取得してから、プロパティ形式とメソッド形式でそれぞれ属性の値を取得して出力します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");
let select_element = form_element.querySelector("select");
let submit_element = form_element.querySelector("input[type=submit]");

// プロパティから属性を取得
console.log(text_element.id); // input_name
console.log(text_element.value); // test
console.log(select_element.value); // 4
console.log(submit_element.id); // btn_submit
console.log(submit_element.value); // 送信

// メソッドから属性を取得
console.log(text_element.getAttribute("id")); // input_name
console.log(text_element.getAttribute("placeholder")); // ここに名前を入力してください
console.log(select_element.getAttribute("value")); // null
console.log(submit_element.getAttribute("type")); // submit
console.log(submit_element.getAttribute("name")); // btn_submit

プロパティ形式とメソッド形式は挙動が微妙に異なり、getAttributeメソッドを使った場合はその要素自身の属性しか参照することができません。
そのため、プルダウンメニューのselect要素のように子要素がvalue属性を持つような構造になっていると、選択している項目の値を取得したいときはselect要素にgetAttributeメソッドを実行しても取得することができません。
このようなときはプロパティ形式で取得するか、またはselected属性を持つ子要素を取得してから値を取得します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let select_element = form_element.querySelector("select");

// selected属性を持つ（選択中）の子要素を取得
let selected_option_element = select_element.querySelector("option[selected]");
console.log(selected_option_element.getAttribute("value")); // 4

HTML要素の属性の値を編集する

HTML要素が持つ属性の値はプロパティ形式で代入するか、setAttributeメソッドを使って編集することができます。

以下の例ではform要素の中にある各HTML要素が持つ属性に対して、プロパティ形式とメソッド形式でそれぞれ属性の値を編集します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");
let select_element = form_element.querySelector("select");
let submit_element = form_element.querySelector("input[type=submit]");

// プロパティ形式で属性を編集
text_element.id = 'input_name2';
text_element.value = '値を編集';

// 子要素のselected属性は変更されないので注意
select_element.value = 2;

// メソッド形式で属性を編集
submit_element.setAttribute( "id", "btn_submit2");
submit_element.setAttribute( "value", "編集");

また、もともと持っていない属性に値を設定した場合は新しく属性を追加します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");
let submit_element = form_element.querySelector("input[type=submit]");

text_element.title = 'タイトル追加';
submit_element.setAttribute( "title", "タイトル追加");

このコードを実行すると以下のようにHTML要素に新しくtitle属性が追加されます。

HTML コード例

<form>
	<input type="text" id="input_name" name="input_name" class="form_element" value="test" placeholder="ここに名前を入力してください" title="タイトル追加">
	<select>
		<option value="1">OP1</option>
		<option value="2">OP2</option>
		<option value="3">OP3</option>
		<option value="4" selected="selected">OP4</option>
		<option value="5">OP5</option>
	</select>
	<input type="submit" id="btn_submit" name="btn_submit" class="form_element" value="送信" title="タイトル追加">
</form>

HTML要素の属性を削除する

HTML要素が持つ属性はremoveAttributeメソッドを使って削除することができます。

以下の例ではform要素の中にある1行テキスト入力欄のinput要素を取得し、value属性とplaceholder属性を削除します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");

// 属性を削除する
text_element.removeAttribute("value");
text_element.removeAttribute("placeholder");

class属性のクラス名を編集する

HTML要素の属性の中でも、class属性は2つ以上の値を持つことがある特殊な属性です。
そのため、値の編集には上記の方法以外にclassNameプロパティとclassListプロパティを使った方法が用意されています。

classNameプロパティはclass属性に設定された既存のクラス名を新しいクラス名に置き換えます。
複数のクラス名を一括で登録できることが特徴です。

もう1つのclassListプロパティは、既存のクラス名を残したまま新しいクラス名を追加したり、指定したクラス名を削除することができます。
細かい制御ができる替わりに、複数のクラス名を一括で操作することはできません。

以下の例はclassNameプロパティの使用例です。
form要素の中にある1行テキスト入力欄のinput要素を取得して、class属性の値を新しいクラス名に一括で編集します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");

// class属性を編集する
text_element.className = "new_class2 new_class3";

このコードを実行すると、元々あったクラス名「form_element」は新しいクラス名「new_class2」と「new_class3」に置き換えられます。

HTML コード例

<input type="text" id="input_name" name="input_name" class="new_class2 new_class3" value="test" placeholder="ここに名前を入力してください">

続いて、もう1つのclassListプロパティの使用例を紹介します。
addメソッドとremoveメソッドを使って、class属性の値を1つずつ編集します。

JS コード例

// HTML要素を取得
let form_element = document.querySelector("form");
let text_element = form_element.querySelector("input[type=text]");

// クラス名を追加
text_element.classList.add("new_class2");
text_element.classList.add("new_class3");

// クラス名を削除
text_element.classList.remove("form_element");

実行した結果は上記のclassNameプロパティと同じ内容になります。

classListプロパティのaddメソッドとremoveメソッドはクラス名を1つずつ追加したり削除することができるため、元々設定されているクラス名に影響せずに編集することができます。