jQuery 1.6.1で変更を加えた後、HTMLのプロパティと属性の違いを定義しようとしています。

jQuery 1.6.1リリースノート（下部近く）のリストを見ると、HTMLのプロパティと属性を次のように分類できるようです。

• プロパティ：ブール値を持つか、selectedIndexなどのUAで計算されるすべて。

• 属性：ブール値でもUA生成値を含まないHTML要素に追加できる「属性」。

考え？

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

たとえば、次のHTML要素は次のとおりです。

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

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

ブラウザがこのコードを解析すると、HTMLInputElementオブジェクトが作成され、このオブジェクトには、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プロパティがあり、反射プロパティのためのid属性：プロパティを取得する属性値を読み出し、そのプロパティを設定すると、属性値を書き込みます。idは純粋に反映されたプロパティであり、値を変更または制限することはありません。

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

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

  theInput.value // returns "John"
  

  一方：

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

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

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

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

そこに直接自分の属性を反映するいくつかのプロパティは（あるrel、id）、いくつかは少し-異なる名前との直接反射である（htmlFor反映for属性をclassName反映したclass属性）を、多くの人が自分の属性を反映していることが、制限/修正を加えた（src、href、disabled、multipleそう）、およびオン。仕様は、さまざまな種類の反射をカバーしています。

Sime Vidasの回答を読んだ後、さらに検索して、Angularドキュメントで非常にわかりやすく理解しやすい説明を見つけました。

HTML属性とDOMプロパティ

-------------------------------

属性はHTMLで定義されます。プロパティは、DOM（Document Object Model）によって定義されます。

• いくつかのHTML属性には、プロパティへの1：1マッピングがあります。id一例です。

• 一部のHTML属性には、対応するプロパティがありません。colspan一例です。

• 一部のDOMプロパティには、対応する属性がありません。textContent一例です。

• 多くのHTML属性がプロパティにマップされているように見えますが、思ったとおりではありません。

この最後のカテゴリは、この一般的なルールを理解するまで混乱します。

属性はDOMプロパティを初期化し、それが実行されます。プロパティ値は変更される可能性があります。属性値はできません。

たとえば、ブラウザがレンダリングする<input type="text" value="Bob">と、valueプロパティが「Bob」に初期化された対応するDOMノードが作成されます。

ユーザーが入力ボックスに「Sally」と入力すると、DOM要素のvalue プロパティは「Sally」になります。ただし、入力要素にその属性について尋ねると、HTMLvalue 属性は変更されませんinput.getAttribute('value')。「Bob」を返します。

HTML属性valueは初期値を指定します。DOMvalueプロパティは現在の値です。

disabled属性は、別の特異な例です。ボタンのdisabledプロパティはfalseデフォルトであるため、ボタンは有効になっています。disabled属性を追加すると、その存在だけでボタンのdisabledプロパティが初期化されるtrueため、ボタンは無効になります。

disabled属性を追加および削除すると、ボタンが無効および有効になります。属性の値は関係ありません。そのため、次のように記述してボタンを有効にすることはできません。<button disabled="false">Still Disabled</button>.

ボタンのdisabled プロパティを設定すると、ボタンが無効または有効になります。プロパティの値が重要です。

HTML属性とDOMプロパティは、同じ名前であっても同じものではありません。

答えはすでに属性とプロパティがどのように異なって扱われるかを説明していますが、これがどれほど完全に狂っているのかを本当に指摘したいと思います。ある程度スペックだとしても。

一部の属性（id、class、foo、barなど）がDOMに1種類の値のみを保持し、一部の属性（checked、selectedなど）が2つの値を保持するのはおかしいです。つまり、「ロードされたとき」の値と「動的状態」の値です。（DOMは、ドキュメントの状態を完全に表すことになっているのではありませんか？）

それはことを、絶対に不可欠である二つの入力フィールド、例えばテキストやチェックボックスの 非常に同じように振る舞います。テキスト入力フィールドに「ロード時」の値と「現在の動的」の値が別々に保持されていない場合、チェックボックスが表示されるのはなぜですか。チェックボックスが2つの値持っていない場合はチェックした属性を、なぜそれがそのために2つ持っていないクラスやID属性を？テキストの*入力*フィールドの値を変更する予定であり、DOM（つまり、「シリアル化された表現」）が変更され、この変更を反映することが予想される場合、いったいなぜ、の入力フィールドから同じことを期待しないのでしょうか。チェックされた属性のチェックボックスを入力しますか？

「ブール属性である」という区別は、私にはまったく意味がないか、少なくともこれの十分な理由ではありません。

これらは、w3cによって、属性とは何か、プロパティとは何かが指定されています。 http://www.w3.org/TR/SVGTiny12/attributeTable.html

しかし現在、attrとpropはそれほど違いはなく、ほとんど同じです

しかし、彼らはいくつかのことのために小道具を好みます

推奨される使用法の要約

.prop（）メソッドは、ブール属性/プロパティおよびhtmlに存在しないプロパティ（window.locationなど）に使用する必要があります。他のすべての属性（htmlで確認できる属性）は、.attr（）メソッドで操作できます。

実際には、attrまたはprop、あるいはその両方を使用する場合は、何かを変更する必要はありません。両方とも機能しますが、自分のアプリケーションで、atrrが機能しなかった場所でpropが機能することを確認したので、1.6アプリのpropを使用しました=）

HTMLのプロパティと属性の違い：

HTMLの違いを評価する前に、まずこれらの単語の定義を見てみましょう。

英語の定義：

• 属性は、オブジェクトの追加情報を参照しています。
• プロパティは、オブジェクトの特性を説明しています。

HTMLコンテキストの場合：

ブラウザがHTMLを解析すると、基本的にHTMLのメモリ内表現であるツリーデータ構造が作成されます。ツリーデータ構造には、HTML要素とテキストであるノードが含まれています。これに関連する属性とプロパティは次のとおりです。

• 属性は、特定のDOMプロパティを初期化するためにHTMLに入力できる追加情報です。
• プロパティは、ブラウザがHTMLを解析してDOMを生成するときに形成されます。DOMの各要素には、すべてブラウザによって設定される独自のプロパティのセットがあります。これらのプロパティの一部は、HTML属性によって初期値を設定できます。レンダリングされたページに影響を与えるDOMプロパティが変更されると、ページはすぐに再レンダリングされます

これらのプロパティのマッピングは1対1ではないことを理解することも重要です。つまり、HTML要素に指定するすべての属性が同様の名前のDOMプロパティを持つわけではありません。

さらに、さまざまなDOM要素とさまざまなプロパティがあります。たとえば、<input>要素には、プロパティに存在しない値プロパティがあり<div>ます。

例：

次のHTMLドキュメントを見てみましょう。

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

次に<div>、JSコンソールでを調べます。

 console.dir(document.getElementById('foo'));

次のDOMプロパティが表示されます（chrome devtools、すべてのプロパティが表示されているわけではありません）。

• HTMLの属性IDがDOMのidプロパティでもあることがわかります。IDはHTMLによって初期化されています（ただし、javascriptで変更できます）。
• HTMLのclass属性には、対応するclassプロパティがないことがわかります（classJSではreservedキーワードです）。しかし、実際には2つのプロパティ、classListおよびclassName。