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

JavaScriptの属性値を取得/設定/削除するサンプルです。

サンプル	属性値とは
	属性値を取得する(getAttribute)
	属性値を設定する(setAttribute)
	属性値を削除する(removeAttribute)
	属性値があるか確認する(hasAttribute)

属性値とは

テキストボックス(input type="text")があるとき、
赤字が属性で、その右にあるのが属性値です。inputは要素です。

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

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

getAttributeメソッドの引数に属性を指定すると、属性値を取得できます。
※id="text1"は要素を取得するために使用します。idの値はHTML文書内で一意のため。

document.getElementById("text1").getAttribute("type");　→　textを取得 document.getElementById("text1").getAttribute("value");　→　赤を取得 document.getElementById("text1").getAttribute("maxlength");　→　5を取得

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

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

document.getElementById("text1").setAttribute("type","属性値"); document.getElementById("text1").setAttribute("value","属性値"); document.getElementById("text1").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>

属性値を削除する(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になります。

以下はMDNのgetAttributeメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute

以下はMDNのsetAttributeメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute