JavaScript 属性値を取得/設定/削除する(getAttribute)

JavaScriptの属性値を取得/設定/削除するサンプルです。
getAttributeとsetAttributeとremoveAttributeを使用します。

目次

仕様 属性と属性値とgetAttribute/setAttributeメソッドの関係
属性値 属性値を取得する(getAttribute)
  属性値を設定する(setAttribute)
  属性値を削除する(removeAttribute)
  属性値があるか確認する(hasAttribute)

属性と属性値とgetAttribute/setAttributeメソッドの関係

属性と属性値とgetAttribute/setAttributeメソッドの関係についてです。

以下にテキストボックスのhtmlがあるとします。(input type="text"です)

<input type="text" id="text1" value="赤" maxlength="5">

このとき属性と属性値は、黄色の箇所が属性でその右横にあるのが属性値です。inputは要素です。

要素・・・input
属性・・・type,id,value,maxlength
属性値・・・text,text1,赤,5

getAttributeメソッドの引数に属性を指定すると、属性値を取得できます。

getAttribute("type"); → textを取得
getAttribute("value"); → 赤を取得
getAttribute("maxlength"); → 5を取得

setAttributeメソッドの1つめの引数に属性を指定し、2つめの引数に属性値を指定すると、属性値を設定できます。

setAttribute("type","属性値");
setAttribute("value","属性値");
setAttribute("maxlength","属性値");

新規の属性の場合は属性自体を追加します。
属性が既にある場合は属性値を変更します。

属性値を取得する(getAttribute)

getAttributeメソッドで、属性値のvalueを取得するサンプルです。

取得した値

コード

上記サンプルのコードです。

<p>取得した値 <span id="span1"></span></p>
<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" value="ボタン" onclick="clickBtn1()">
<input type="button" value="クリア" onclick="clickBtn2()">

<script>
function clickBtn1(){
	const t1 = document.getElementById("text1").getAttribute("value"); 
	document.getElementById("span1").textContent = t1;
}
function clickBtn2(){
	document.getElementById("span1").textContent = "";
}
</script>

2行目のボタンをクリックすると5行目の関数を実行します。
8行目は、getAttributeメソッドで、1行目のテキストボックスのvalueの属性値を取得します。
12,14行目は、setAttributeメソッドで、1行目のテキストボックスのvalueに属性値をセットします。

属性値を設定する(setAttribute)

setAttributeメソッドで、属性値のvalueを設定するサンプルです。

コード

上記サンプルのコードです。

<input type="text" id="text2" value="赤" maxlength="5" disabled>
<input type="button" value="ボタン" onclick="clickBtn3()">
<input type="button" value="クリア" onclick="clickBtn4()">

<script>
function clickBtn3(){
	document.getElementById("text2").setAttribute("value","青"); 
}
function clickBtn4(){
	document.getElementById("text2").setAttribute("value",""); 
}
</script>

2行目のボタンをクリックすると5行目の関数を実行します。
8行目は、getAttributeメソッドで、1行目のテキストボックスのvalueの属性値を取得します。
12,14行目は、setAttributeメソッドで、1行目のテキストボックスのvalueに属性値をセットします。

属性値を削除する(removeAttribute)

属性値を削除するサンプルです。

<input type="text" id="text1" value="赤" maxlength="5" >
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){

	const text1 = document.getElementById("text1");

	text1.removeAttribute("maxlength");
}
</script>

7行目は、getElementByIdで要素を取得しています。
9行目は、1行目のテキストボックスの属性のmaxlengthを削除しています。

以下は実行後のイメージです。maxlengthが削除されています。

属性値があるか確認する(hasAttribute)

属性値があるか確認するサンプルです。

<input type="text" id="text1" value="赤" maxlength="5" >
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){

	const text1 = document.getElementById("text1");

	if (text1.hasAttribute("maxlength")){
		console.log("あります");
	}
}
</script>

9行目は、hasAttributeメソッドで属性のmaxlengthが存在するか確認しています。
存在しているのでtrueになります。

getAttributeメソッド

変数 = 要素.getAttribute(属性名);

setAttributeメソッド

要素.setAttribute(属性名,属性値);

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ名で取得/設定する(getElementsByTagName)
JavaScript クラスで取得/設定する(getElementsByClassName)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 要素を追加/削除する(createElement他)
JavaScript ノードを置換するサンプル(replaceChild)

△上に戻る