setAttribute()

セットアトリビュート（DOM操作）

意味要素の属性の値を設定または変更

setAttribute()とは？

setAttribute()メソッドは、指定した属性の値を設定または変更します。

setAttribute()の具体的な使い方

要素の属性を設定・変更する例

const button = document.createElement('button');

// 新しい属性を設定
button.setAttribute('id', 'myButton');
button.setAttribute('class', 'btn btn-primary');
button.setAttribute('disabled', '');

console.log('Button ID:', button.getAttribute('id'));
console.log('Button Class:', button.getAttribute('class'));
console.log('Is Disabled:', button.hasAttribute('disabled'));

// 既存の属性を変更
button.setAttribute('class', 'btn btn-secondary');
button.removeAttribute('disabled');

console.log('Updated Button Class:', button.getAttribute('class'));
console.log('Is Still Disabled:', button.hasAttribute('disabled'));

👇出力結果

Button ID: myButton
Button Class: btn btn-primary
Is Disabled: true
Updated Button Class: btn btn-secondary
Is Still Disabled: false

ボタン要素に新しい属性を設定し、その後一部の属性を変更します。setAttribute()を使って属性を追加・変更し、removeAttribute()で属性を削除します。

setAttribute()に関するよくある質問

Q. 既存の属性値はどうなる？

A. setAttribute()を使用すると、既存の属性値は上書きされます。属性が存在しない場合は新しく作成されます。

Q. ブール属性の設定方法は？

A. ブール属性（例：disabled）を設定する場合、値として空文字列を使用します。例：element.setAttribute('disabled', '');

Q. 複数の属性を一度に設定できる？

A. setAttribute()は一度に1つの属性しか設定できません。複数の属性を設定するには、メソッドを複数回呼び出す必要があります。

setAttribute()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのsetAttribute()やremoveChild()、insertBefore()、Element、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。