[解決済み] HTMLのプロパティと属性の違いは何ですか？

質問

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

のリストを見ると jQuery 1.6.1リリースノート (を見ると、HTMLのプロパティと属性は以下のように分類できるようです。

• プロパティ。ブール値を持つもの、またはselectedIndexのようにUA計算されるもの全て。

• アトリビュート。HTML要素に追加できる'属性'で、ブーリアンでもなく、UAが生成した値を含むものでもないもの。

ご感想は？

解決方法は？

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 ノードオブジェクトに対して、properties はそのオブジェクトのプロパティ、attributes は 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 ) などのようになります。 仕様書 は、さまざまな種類のリフレクションをカバーしています。