DOMでの要素属性の操作

属性は、HTML要素に追加される値であり、追加情報の提供や動作の変更を行うために使用されます。JavaScript では、これらの属性を操作するためのさまざまなメソッドが用意されており、特定の属性を動的に取得、設定、削除、または存在確認することができます。

GetAttribute()

getAttribute() は、要素から指定した属性の値を取得するために使用されます。href、src、class など、特定の属性値にアクセスする必要がある場合に便利です。

アンカー（href）要素の <a> 属性の値へのアクセス。

SetAttribute()

setAttribute() は、要素に新しい属性を追加するか、既存の属性の値を変更するために使用。

画像の alt 属性を設定または更新し、ユーザーの操作やアプリケーションのロジックに基づいて動的に変更可能。

RemoveAttribute()

removeAttribute() は、指定した属性を要素から削除し、特定のイベントや状態に応じて属性を条件付きで切り替える際に有用。

disabled属性を削除し、ボタンの操作を有効化。

HasAttribute()

hasAttribute()は、要素に指定した属性が存在するかどうかを確認。条件分岐のロジックで特に有用であり、追加の処理を行う前に特定の属性が存在することを保証。

入力フィールドに required 属性が存在するかを確認し、それに応じてメッセージをログに出力。

プロパティと属性の違い

プロパティと属性はしばしば同じ意味で使われますが、DOM内で異なる役割を持ちます。それぞれの違いを確認。

• value 属性は、HTML で定義された元の値を保持
• value プロパティは、入力の現在の動的に更新された状態を反映

実践例：EC サイトでの商品詳細管理

商品詳細セクションで、ユーザーが在庫状況、注目商品ステータス、配送オプションなどの商品情報を更新できる場面を想定。この例では、これらの要素を動的に制御するために属性がどのように使われるかを示す。

setAttribute() メソッドは、ユーザーの操作に応じて要素に特定の属性を動的に追加するために使用。例えば、在庫状況が「Out of Stock」に切り替えられた場合、setAttribute() はユニークなスタイリングを適用するために out-of-stock クラスを追加。また、商品が注目商品としてマークされた場合、注目チェックボックスに data-featured 属性を追加。

removeAttribute() メソッドは、不要になった属性を削除するために使用。例えば、「In Stock」に戻した際に out-of-stock クラスを削除し、商品が注目商品でなくなった場合は data-featured 属性を削除。さらに、removeAttribute() を使って、hidden 属性の追加や削除によって配送情報の表示・非表示を切り替え。

最後に、hasAttribute() はこれらの属性の有無を確認するために使用。例えば、注目ステータスを更新する前に data-featured 属性の存在を確認したり、配送情報の hidden 属性をチェックして表示状態を判定。