【JavaScriptメソッド】属性値を操作する.getAttribute().setAttribute().removeAttribute()メソッドについて解説

今回は属性値を操作(取得・設定・削除)するメソッドである「.getAttribute()メソッド」、「.setAttribute()メソッド」、「.removeAttribute()メソッド」について解説したいと思います。

JavaScriptには様々なメソッドがあり全てを覚えるのは大変ですが、メソッドを日本語訳すると大体の予想がつきます(getAttribute→属性値をゲットする、setAttribute→属性値をセットする、removeAttribute→属性値をリムーブするなど)。

属性と属性値

まずはそれぞれのメソッドについて学習する前に、属性と属性値について確認しておきましょう。以下のようなHTML構造があるとします。

<input type="text" id="test1" value="赤">

属性はtypeとidとvalueになり、属性値はtextとtest1と赤になります。左に書かれているのが属性、右側が属性値と覚えておけばいいですね。

ちなみにinputは要素です。

では、それぞれのメソッドを順番に見ていきましょう。

.getAttribute()メソッド

まずは「.getAtrribute()メソッド」です。このメソッドを直訳すると「属性値をゲットする」になるので、これは属性値を取得するメソッドになります。

例を見ていきましょう。

<input type="text" id="test1" value="赤">

このHTML構造の属性値を「.getAttribute()メソッド」を使用して取得していきます。

getAttribute("type");　
// => textを取得

getAttribute("id");
// => test1を取得

getAttribute("value");
// => 赤を取得

.setAttribute()メソッド

次に「.setAtrribute()メソッド」です。このメソッドを直訳すると「属性値をセットする」になるので、これは属性値を設定するメソッドになります。

例を見ていきましょう。

<input type="text" id="test1" value="赤">

このHTML構造の属性値を「.setAttribute()メソッド」を使用して設定していきます。

setAttribute("type", "hidden");　
// => type属性をtextからhiddenに変更

setAttribute("value", "青");
// => value属性を赤から青に変更

setAttribute("maxlength", "8");
// => maxlength属性(8文字分)を新しく追加

.removeAttribute()メソッド

最後は「.removeAtrribute()メソッド」です。このメソッドを直訳すると「属性値をリムーブする」になるので、これは属性値を削除するメソッドになります。

例を見ていきましょう。

<input type="text" id="test1" value="赤">

このHTML構造の属性値を「.removeAttribute()メソッド」を使用して削除していきます。

removeAttribute("type");　
// => type属性を削除

removeAttribute("id");
// => id属性を削除

removeAttribute("value");
// => value属性を削除

まとめ

• .getAtrribute()メソッドは、属性値を取得するメソッドである
• .setAttribute()メソッドは、属性値を設定するメソッドである
• .removeAttribute()メソッドは、属性値を削除するメソッドである

今回は属性値を操作(取得・設定・削除)するメソッドである「.getAttribute()メソッド」、「.setAttribute()メソッド」、「.removeAttribute()メソッド」について解説しました。JavaScriptのメソッドはたくさんあるので1つずつ確実に覚えていきましょう。