HTML のプロパティと属性の違いは何ですか? 質問する

HTML ソース コードを書くときに、HTML 要素に属性を定義できます。その後、ブラウザーがコードを解析すると、対応する DOM ノードが作成されます。このノードはオブジェクトであるため、プロパティがあります。

たとえば、次の HTML 要素:

<input type="text" value="Name:">

2 つの属性 (typeおよびvalue) があります。

ブラウザがこのコードを解析すると、HTML入力要素オブジェクトが作成され、このオブジェクトには、accept、accessKey、align、alt、attributes、autofocus、baseURI、checked、childElementCount、childNodes、children、classList、className、clientHeight などの多数のプロパティが含まれます。

特定の DOM ノード オブジェクトの場合、プロパティはそのオブジェクトのプロパティであり、属性はattributesそのオブジェクトのプロパティの要素です。

特定の HTML 要素に対して DOM ノードが作成されると、そのプロパティの多くは同じまたは類似の名前を持つ属性に関連付けられますが、1 対 1 の関係ではありません。たとえば、この HTML 要素の場合:

<input id="the-input" type="text" value="Name:">

対応する DOM ノードにはid、、、typeおよびvalueプロパティ (その他) が含まれます。

• プロパティは属性の反映プロパティidです。プロパティを取得すると属性値が読み取られ、プロパティを設定すると属性値が書き込まれます。は純粋な反映プロパティであり、値を変更したり制限したりしません。idid

• プロパティは属性の反映プロパティtypeです。プロパティを取得すると属性値が読み取られ、プロパティを設定すると属性値が書き込まれます。は既知の値(入力の有効なタイプなど)に限定されているため、純粋な反映プロパティではありません。 があった場合、は になりますが、は になります。typetype<input type="foo">theInput.getAttribute("type")"foo"theInput.type"text"

• 対照的に、valueプロパティは属性を反映しませんvalue。代わりに、入力の現在の値valueを反映します。ユーザーが入力ボックスの値を手動で変更すると、プロパティはこの変更を反映します。つまり、ユーザーが"John"入力ボックスに入力すると、次のようになります。

  theInput.value // returns "John"
  

  一方：

  theInput.getAttribute('value') // returns "Name:"
  

  プロパティは入力ボックス内の現在のテキスト コンテンツvalueを反映しますが、属性にはHTML ソース コードからの属性の初期テキスト コンテンツが含まれます。valuevalue

  したがって、テキスト ボックス内に現在何が入っているかを知りたい場合は、プロパティを読み取ります。ただし、テキスト ボックスの初期値が何であったかを知りたい場合は、属性を読み取ります。または、属性defaultValueを純粋に反映するプロパティを使用することもできますvalue。

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"