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

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

• プロパティ：boolean値を持つもの、または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の回答を読んだ後、私はさらに検索し、角度付きのドキュメントで非常に簡単で理解しやすい説明を見つけました。

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ノードが作成されます。

ユーザーが入力ボックスに「サリー」と入力すると、DOM要素のvalue プロパティは「サリー」になります。しかし、HTMLのvalue 属性については、入力要素にその属性について尋ねるかどうかを確認しても変化しませんinput.getAttribute('value')。「Bob」を返します。

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

---

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は、ドキュメントの状態を完全に表すものではないのですか？）

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

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

これらはw3cによって属性とは何か、プロパティとは何かによって指定されます 。

しかし、現在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プロパティが表示されます（すべてのプロパティが表示されているわけではありません）。

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