属性の変更（setAttribute, removeAttribute）

DOMの操作（変更）― 属性の変更（setAttribute, removeAttribute）

DOM（Document Object Model）では、HTML要素の属性を動的に操作することができます。その代表的なメソッドが setAttribute() と removeAttribute() です。これらを使うことで、HTMLタグに直接書かれた属性をスクリプトから追加・変更・削除できます。

---

1. setAttribute(name, value)

• 概要: 指定した要素に新しい属性を追加するか、既存の属性を変更します。

• 引数:

  • name: 属性名（例: "id", "class", "src", "href" など）

  • value: 設定する値

• 特徴:

  • すでに属性が存在する場合は値を上書きする。

  • 存在しない場合は新しく追加される。

使用例

html
<p id="text">サンプルテキスト</p>

<script>
  const element = document.getElementById("text");
  element.setAttribute("class", "highlight");  // class属性を追加
  element.setAttribute("id", "newText");       // idを変更
</script>

上記のコードを実行すると、<p> 要素は以下のように変化します。

html
<p id="newText" class="highlight">サンプルテキスト</p>

---

2. removeAttribute(name)

• 概要: 指定した属性を要素から削除します。

• 引数:

  • name: 削除する属性名

• 特徴:

  • 属性が存在しない場合は何も起こらない。

  • 属性が削除されると、デフォルトの挙動に戻ることがある（例: <input type="text"> の disabled 属性を削除すると再び入力可能になる）。

使用例

html
<input type="text" id="username" value="guest" disabled>

<script>
  const input = document.getElementById("username");
  input.removeAttribute("disabled");  // disabled属性を削除
</script>

このコードを実行すると、入力欄は再びユーザーが編集できるようになります。

---

3. 実践例

例えば、ボタンをクリックしたときにリンクの href を切り替えるといった動作が可能です。

html
<a id="myLink" href="https://example.com">リンク</a>
<button id="changeBtn">リンクを変更</button>

<script>
  const link = document.getElementById("myLink");
  const button = document.getElementById("changeBtn");

  button.addEventListener("click", () => {
    // すでに属性があれば変更、なければ追加
    link.setAttribute("href", "https://openai.com");
    link.setAttribute("target", "_blank");

    // 条件に応じて属性を削除
    if (link.hasAttribute("target")) {
      link.removeAttribute("target");
    }
  });
</script>

---

まとめ

• setAttribute(name, value): 属性を追加または更新する。

• removeAttribute(name): 属性を削除する。

• これらを利用することで、HTML要素の状態を動的に変化させることが可能になり、インタラクティブなWebページを構築できる。