8

これは .prop() と.attr()の重複ではないことに注意してください。その質問は prop と attr の基本的な機能に言及していますが、この質問はセッターとしての違いに固有のものです。

jQuery 1.7.2 でのテストでは、新しい要素を作成するときに .prop() を使用して設定する必要があるものと .attr() を介して設定する必要があるものを絞り込もうとすると、prop が約 2.5 倍高速であることがわかりました。好ましいようです。

私が見つけることができた attr を使用して設定する唯一のリストは、attr について次のとおりです。

accesskey, align, background, bgcolor, class, contenteditable, contextmenu, data-XXXX, draggable, height, hidden, id, item, itemprop, spellcheck, style, subject, tabindex, title, valign, width

  1. これは完全ですか (つまり、そのリストにないもの - min、max、step など - prop を使用する必要があります)?

  2. テストでは、prop を使用して設定すると、それらのいくつかは正常に動作するようです。上記のリストをテストしたところ、prop を使用して以下を設定しても問題はありませんでした。

    id、クラス、整列、コンテンツ編集可能、ドラッグ可能、非表示、スペルチェック、タブインデックス、タイトル

  3. 「propで設定しても機能するattrで設定するもの」のリストには、attrで設定する必要がある理由がありますか？そうでない場合、基本を作成するときのパフォーマンスが 250% 速くなれば、<div id="foo" class="bar" draggable="true" title="zipzap">私には良いように思えます... :)

4

2 に答える 2

23

オンラインで完全なリストを見つけることができません。あらゆる種類のリストを提供する人は誰でも、jQuery1.6のブログ投稿で提供されているリストの一部をコピーするだけです。＃3に関しては、Starxは、ここでの回答に対するコメントでこれに対処しました。 http://timmywillison.com/は、まともな議論でより詳細に説明します。MDNとW3Cの仕様には、属性からプロパティであるかのように設定できるさまざまなインターフェイスがあることも記載されています（https://developer.mozilla.org/en/DOM/element）。ただし、MDNには実際にはどれがリストされていません。それらはそうです。MDNは、プロパティインターフェイスをセッターとして使用する方が、getAttributeを使用するよりも脆弱であると述べています。

「これらのインターフェースは通常、ほとんどのHTMLおよびXML要素で共有されますが、DOM HTML仕様にリストされている特定のオブジェクトに特化したインターフェースがあります。ただし、これらのHTMLインターフェースは「[HTML4.01]および[XHTML1.0]専用であることに注意してください。 HTML 5ドラフトは、これらのHTMLインターフェースとの下位互換性を目指していると述べていますが、「以前は非推奨で、サポートが不十分で、ほとんど使用または考慮されていなかった機能もあります。不要なものは削除されました。"getAttribute（）などのDOM XML属性メソッドに完全に移行することで、潜在的な競合を回避できます。"

ただし、現時点では、FirefoxおよびChromeでレンダリングされたHTML5 doctypeページは、「非推奨、サポートが不十分」などのインターフェイスがすでに削除されている環境にあると想定しても問題ありません。

したがって、ブール値、文字列値、およびint値を使用して、すべてのHTML要素タイプに対して、jQueryブログで言及されているすべての属性と非属性プロパティをテストしました。

1.7.2および1.8preを使用すると、.prop（）またはattr（）のどちらを呼び出しても、jQueryは内部的に常に実際に次の目的で.propを使用します。

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected

HTML要素（ここではウィンドウ、ドキュメントなどを考慮していません）の場合、.attr（）を使用しない限り、jQueryは次の属性を設定しません。

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName

そして最後に、jQueryは.prop（）または.attr（）のいずれかを使用して次の属性のリストを設定します。上記の最初のリストでは、.attr（）と.prop（）のどちらを使用するかに関係なく、jQueryは常に.prop（）を使用します。このリストの属性については、jQueryはユーザーが使用するものをすべて使用します。.prop（）を使用する場合、jQueryは.prop（）を使用し、その逆も同様です。どちらの場合も、結果は同じです。したがって、潜在的なセマンティックの考慮事項を無視すると、prop（）が.attr（）よりも約2.5倍高速であるという点で、jQuery 1.6.1ブログ投稿では、.attr（）を使用することを提案していますが、代わりに.prop（）を使用できます。 、パフォーマンスが大幅に向上します。

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap
于 2012-06-27T02:52:19.557 に答える
1

これを簡単な言葉で理解してみてください。

.attr()要素の属性を与えます。ページにロードされたときのその属性。

.prop()、要素のプロパティを与える、

  • チェックボックスの場合のように、これは要素の状態であり、チェックされているかチェックされていないかのいずれかです。
  • または、デフォルト状態なので、要素の属性を変更できます。

この質問には、知っておく必要のあるすべての違いがあります。通常、DOM 操作部分を操作する場合、属性ではなくプロパティが必要です。TJの答えは、その概念を本当に明確にしています。

于 2012-06-11T11:08:26.117 に答える