setAttributeとgetAttributeの使い方

属性の値を取得するために使います。指定した属性が存在しない場合、nullが返されます。Web開発において、HTMLの要素に対して属性を設定したり取得したりすることはよくあります。JavaScriptでは、これを行うためにsetAttributeとgetAttributeというメソッドを使います。この記事では、この2つのメソッドの使い方を分かりやすく説明します。

setAttributeとは？

setAttributeは、HTML要素に新しい属性を設定したり、既存の属性を更新するために使います。このメソッドを使うことで、簡単に任意の属性を付け加えたり、変更することが可能です。

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

例:
以下のコードは、ボタン要素に新たにidとclass属性を追加しています。

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById("myButton");
  button.setAttribute("class", "btn-primary");
  button.setAttribute("disabled", "true");
</script>

上記の例では、

button.setAttribute("class", "btn-primary"); で、ボタンにクラスを設定しています。

button.setAttribute("disabled", "true"); で、ボタンを無効化しています。

getAttributeとは？

構文:

要素.getAttribute(属性名);

例:
以下のコードは、ボタンのid属性の値を取得しています。

<button id="myButton" class="btn-primary">Click me</button>
<script>
  const button = document.getElementById("myButton");
  const className = button.getAttribute("class");
  console.log(className);  // "btn-primary" と表示されます
</script>

上記の例では、button.getAttribute("class")でボタンのクラス名（btn-primary）を取得し、それをコンソールに表示しています。

setAttributeとgetAttributeの違い

setAttribute: 属性を設定・変更するためのメソッドです。

getAttribute: 属性の値を取得するためのメソッドです。

まとめ

setAttributeとgetAttributeを使うことで、JavaScriptでHTMLの属性を動的に操作することが可能になります。setAttributeで属性を追加・更新し、getAttributeでその値を取得するという形で使うと便利です。

例えば、フォーム要素の有効化・無効化、リンクのURL変更、またはカスタム属性を利用して要素に特定のデータを持たせることなど、さまざまなシーンでこれらのメソッドを活用できます。

最後までよんでいただきありがとうございます。
@y-t0910をフォロー,いいねしていただけると嬉しいです！