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

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

目次

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

属性値を取得する/設定するメソッド

変数 = 要素.getAttribute(属性名);
要素.setAttribute(属性名,属性値);
  • getAttributeメソッドは、引数の属性名から属性値を取得します。
  • setAttributeメソッドは、引数の属性名に属性値をセットします。
    →新規の属性の場合は属性自体を追加します。
    →属性が既にある場合は属性値を変更します。

属性と属性値とは?

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

<input type="textid="text1value="maxlength="5">

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

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

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

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

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>

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になります。

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

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

関連の記事

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

△上に戻る