はじめに
HTMLやJavaScriptを扱う際に混同しやすい「属性(Attribute)」と「プロパティ(Property)」について、違いを整理していきましょう。
属性(Attribute)とは
属性はHTML上に記述される静的な値です。HTMLファイルやHTMLコードの中に直接書かれた文字列として存在します。
<input type="text" value="初期値" id="username">
上記のコードでは、type、value、idがすべて属性です。ブラウザがHTMLを解析する際に読み取られます。
プロパティ(Property)とは
プロパティはDOM(Document Object Model)オブジェクトが持つJavaScriptのプロパティです。ブラウザがHTMLを解析してDOMツリーを構築した後、JavaScriptからアクセスできる動的な値として存在します。
const input = document.getElementById('username');
console.log(input.value); // プロパティにアクセス
両者の関係性
HTMLの属性は、DOMオブジェクトのプロパティを初期化するために使われます。しかし、一度DOMが生成された後は、属性とプロパティは独立して動作するのが特徴ですね。
具体的な違い
動作の違い
<input type="text" value="初期値" id="sample">
このinput要素に対して、ユーザーが「変更後の値」と入力した場合:
const input = document.getElementById('sample');
// 属性: 変化しない（HTML上の初期値のまま）
console.log(input.getAttribute('value')); // "初期値"
// プロパティ: 現在の状態を反映
console.log(input.value); // "変更後の値"
更新処理の違い
属性とプロパティの対応
すべての属性に対応するプロパティがあるわけではなく、またプロパティの名前が属性名と異なる場合もあります。
| HTML属性 | DOMプロパティ | 備考 |
|---|---|---|
| class | className | 名前が異なる |
| for | htmlFor | 名前が異なる |
| value | value | input要素では独立して動作 |
| checked | checked | checkbox/radioの状態 |
実装時の注意点
プロパティを使うべきケース
現在の状態を取得・変更したい場合はプロパティを使います。
// 良い例: プロパティで現在の値を取得
if (input.checked) {
console.log('チェックされています');
}
// 現在の入力値を取得
const currentValue = input.value;
属性を使うべきケース
HTML上の初期値を確認したい場合や、カスタムデータ属性にアクセスする場合は属性を使いましょう。
// 初期値の確認
const initialValue = input.getAttribute('value');
// カスタムデータ属性へのアクセス
const userId = element.getAttribute('data-user-id');
まとめ
属性とプロパティの違いは以下の通りです:
属性は静的なHTML上の記述であり、初期値として機能します。getAttribute()やsetAttribute()でアクセスします。
プロパティは動的なJavaScriptオブジェクトの値であり、現在の状態を反映します。ドット記法やブラケット記法でアクセスします。
この違いを理解することで、フォームの値管理やDOM操作をより正確に実装できるようになります。