javascript - .prop() と .attr()

Question

したがって、 jQuery 1.6には新しい機能がありますprop()。

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

またはこの場合、彼らは同じことをしますか？

そして、使用に切り替える必要がある場合、1.6 に切り替えるとprop()古い呼び出しはすべて壊れますか?attr()

アップデート

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(このフィドルも参照してください: http://jsfiddle.net/maniator/JpUF2/ )

コンソールはgetAttributeを文字列として、 を文字列として記録しますattrが、 をpropとして記録しCSSStyleDeclarationます。そして、それは将来の私のコーディングにどのように影響しますか?

Answer 1

2012 年 11 月 1 日更新

私の元の答えは、特に jQuery 1.6 に適用されます。私のアドバイスは変わりませんが、jQuery 1.6.1 では状況が少し変わりました。壊れた Web サイトが山積みになると予測されていたため、jQuery チームはBoolean 属性の以前の動作に近い (ただし正確には同じではない) ものに戻しattr()ました。John Resig もこれについてブログを書いています。彼らが困難に直面していたことはわかりますが、彼の推奨するattr().

元の答え

DOM を直接使用せずに jQuery のみを使用したことがある場合、これは紛らわしい変更かもしれませんが、概念的には間違いなく改善されています。ただし、この変更の結果として機能しなくなる jQuery を使用する膨大な数のサイトにはあまり適していません。

主な問題を要約します。

• 通常prop()はattr().
• ほとんどの場合、以前と同じprop()ように動作attr()します。コード内で への呼び出しを置き換えると、attr()通常prop()は機能します。
• 一般に、プロパティは属性よりも扱いが簡単です。属性値は文字列のみですが、プロパティは任意の型にすることができます。たとえば、checkedプロパティはブール値であり、styleプロパティはスタイルごとに個別のプロパティを持つオブジェクトであり、sizeプロパティは数値です。
• 同じ名前のプロパティと属性の両方が存在する場合、通常、一方を更新すると他方も更新されますが、 や などの入力の特定の属性には当てはまりませんvalue。checkedこれらの属性の場合、プロパティは常に現在の状態を表し、属性 (古いバージョンの IE を除く) は、入力のデフォルト値/checkedness に対応します ( defaultValue/defaultCheckedプロパティに反映されます)。
• この変更により、属性とプロパティの前にある魔法の jQuery の層の一部が削除されます。つまり、jQuery 開発者は、プロパティと属性の違いについて少し学ぶ必要があります。これは良いことです。

あなたが jQuery 開発者で、プロパティと属性に関するこのビジネス全体に混乱している場合は、一歩下がって、それについて少し学ぶ必要があります。jQuery は、このようなことからあなたを守ろうとしているわけではないからです。この主題に関する権威あるがややドライな言葉については、仕様があります: DOM4、HTML DOM、DOM Level 2、DOM Level 3。Mozilla の DOM ドキュメントは、最新のほとんどのブラウザーで有効であり、仕様よりも読みやすいため、DOM リファレンスが役立つ場合があります。要素のプロパティに関するセクションがあります。

プロパティが属性よりも扱いやすい例として、最初にチェックされているチェックボックスを考えてみましょう。これを行うための有効な HTML の 2 つの部分を次に示します。

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

では、jQuery でチェックボックスがオンになっているかどうかを確認するにはどうすればよいでしょうか。Stack Overflow を見ると、一般的に次の提案が見つかります。

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

checkedこれは、1995 年以来、すべての主要なスクリプト可能なブラウザーに存在し、問題なく機能してきた Boolean プロパティを使用する世界で最も簡単なことです。

if (document.getElementById("cb").checked) {...}

このプロパティは、チェックボックスのチェックまたはチェック解除も簡単にします。

document.getElementById("cb").checked = false

jQuery 1.6 では、これは明確に次のようになります。

$("#cb").prop("checked", false)

チェックボックスをスクリプト化するために属性を使用するという考えcheckedは役に立たず、不必要です。プロパティは必要なものです。

• チェックボックスをオンまたはオフにする正しい方法がchecked属性を使用していることは明らかではありません
• 属性値は、現在の表示状態ではなくデフォルトを反映します (一部の古いバージョンの IE を除き、状況はさらに難しくなります)。この属性は、ページのチェックボックスがチェックされているかどうかについて何も伝えません。http://jsfiddle.net/VktA6/49/を参照してください。

Answer 2

ティムの言ったことはとても上手だと思いますが、話を戻しましょう。

DOM 要素はオブジェクトであり、メモリ内のものです。OOP のほとんどのオブジェクトと同様に、プロパティがあります。また、個別に、要素で定義された属性のマップもあります (通常は、要素を作成するためにブラウザーが読み取ったマークアップから取得されます)。要素のプロパティの一部は、同じまたは類似の名前を持つ属性から初期値を取得します ( は「value」属性から初期値を取得します。「href」属性から初期値を取得しますが、まったく同じ値ではありません。 「クラス」属性)。他のプロパティは、別の方法で初期値を取得します。たとえば、プロパティは親要素が何であるかに基づいて値を取得します。valuehrefclassNameparentNodestyleプロパティ、「スタイル」属性があるかどうか。

のページでこのアンカーを考えてみましょうhttp://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

いくつかの不当な ASCII アート (および多くのものを省略):

+---------------------------------------+
| | HTMLアンカー要素 |
+---------------------------------------+
| | href: "http://example.com/foo.html" |
| | 名前: "fooAnchor" |
| | id: "fooAnchor" |
| | className: "テスト 1" |
| | 属性: |
| | href: "foo.html" |
| | 名前: "fooAnchor" |
| | id: "fooAnchor" |
| | クラス: "テスト 1" |
+---------------------------------------+

プロパティと属性は異なることに注意してください。

現在、それらは別個のものですが、これらはすべてゼロから設計されたのではなく進化したため、多くのプロパティは、設定した場合に派生元の属性に書き戻されます。しかし、すべてがそうであるとは限りません。上からわかるhrefように、マッピングは必ずしも単純に「値を渡す」とは限らず、解釈が必要になる場合もあります。

オブジェクトのプロパティであるプロパティについて話すとき、私は抽象的に話しているわけではありません。jQuery 以外のコードを次に示します。

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(これらの値はほとんどのブラウザーと同じです。多少の違いがあります。)

オブジェクトは実在するものであり、そのオブジェクトのプロパティへのアクセスと属性linkへのアクセスには実際の違いがあることがわかります。

Tim が言ったように、ほとんどの場合、プロパティを操作したいと考えています。その理由の 1 つは、それらの値 (名前でさえも) がブラウザー間でより一貫している傾向があるためです。ほとんどの場合、関連するプロパティ (カスタム属性) がない場合、またはその特定の属性について、属性とプロパティが 1:1 ではないことがわかっている場合にのみ、属性を操作したいと考えています (href上記の「href」と同様)。 .

標準プロパティは、さまざまな DOM 仕様に配置されています。

• DOM2 HTML (ほとんど廃止されました。代わりにHTML 仕様を参照してください)
• DOM2 コア (廃止)
• DOM3 コア (廃止)
• DOM4

これらの仕様には優れたインデックスがあり、それらへのリンクを手元に置いておくことをお勧めします。私はいつもそれらを使用しています。

カスタム属性には、たとえば、コードにメタデータを提供するために要素に配置する可能性のある属性が含まれます (接頭辞data-xyzに固執する限り、これは HTML5 の時点で有効です)。(最近のバージョンの jQuery では、関数を介して要素data-にアクセスできますが、その関数は単なる属性のアクセサーではありません[それ以上の機能とそうでない機能の両方を実行します]。実際にその機能が必要でない限り、私は関数を使用して対話します属性付き。)data-xyzdatadata-xyzattrdata-xyz

このattr関数には、文字どおり属性を取得するのではなく、ユーザーが必要だと考えたものを取得するための複雑なロジックが含まれていました。それは概念を混同しました。propandへの移動は、attrそれらの統合を解除することを目的としていました。簡単に言うと、v1.6.0 では jQuery はその点で行き過ぎていましたが、技術的attrに.attrprop

Answer 3

この変更は、jQueryにとって長い間行われてきました。attr()何年もの間、名前から期待される結果ではなく、ほとんどがDOMプロパティを取得するという名前の関数に満足してきました。との分離はattr()、prop()HTML属性とDOMプロパティの間の混乱を緩和するのに役立つはずです。$.fn.prop()指定されたDOMプロパティを$.fn.attr()取得し、指定されたHTML属性を取得します。

それらがどのように機能するかを完全に理解するために、HTML属性とDOMプロパティの違いについて詳しく説明します。

HTML属性

構文：

<body onload="foo()">

目的： マークアップに、イベント、レンダリング、およびその他の目的でデータを関連付けることができます。

視覚化： クラス属性は、ここの本文に表示されます。次のコードからアクセスできます。

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

属性は文字列形式で返され、ブラウザ間で一貫性がない可能性があります。ただし、状況によっては重要になる場合があります。上で例示したように、IE 8クァークズモード（およびそれ以下）では、属性名ではなく、get / set/removeAttributeにDOMプロパティの名前が必要です。これは、違いを知ることが重要である多くの理由の1つです。

DOMプロパティ

構文：

document.body.onload = foo;

目的： 要素ノードに属するプロパティへのアクセスを許可します。これらのプロパティは属性に似ていますが、JavaScriptを介してのみアクセスできます。これは、DOMプロパティの役割を明確にするのに役立つ重要な違いです。このイベントハンドラーの割り当ては役に立たず、イベントを受け取らないため、属性はプロパティとは完全に異なることに注意してください（本体にはonloadイベントはなく、onload属性のみがあります）。

視覚化：

ここでは、Firebugの[DOM]タブの下にプロパティのリストが表示されます。これらはDOMプロパティです。あなたはそれを知らずに以前にそれらを使用したことがあるので、あなたはそれらのかなりの数にすぐに気付くでしょう。それらの値は、JavaScriptを介して受け取るものです。

ドキュメンテーション

• JavaScript：DavidFlanaganによる決定的なガイド
• HTML属性、Mozilla Dev Center
• DOM要素のプロパティ、Mozilla Dev Center

例

HTML：<textarea id="test" value="foo"></textarea>

JavaScript：alert($('#test').attr('value'));

以前のバージョンのjQueryでは、これは空の文字列を返します。1.6では、適切な値を返しますfoo。

どちらの関数の新しいコードも一瞥していなくても、混乱はコード自体よりもHTML属性とDOMプロパティの違いに関係していると自信を持って言えます。うまくいけば、これはあなたのためにいくつかのことをクリアしました。

-マット

Answer 4

プロパティはDOMにあります。属性は、DOMに解析されるHTMLにあります。

詳細

属性を変更すると、その変更はDOMに反映されます（名前が異なる場合もあります）。

例：タグのclass属性を変更するclassNameと、DOM内のそのタグのプロパティが変更されます（これclassはすでに使用されているためです）。タグに属性がない場合でも、空の値またはデフォルト値を持つ対応するDOMプロパティがあります。

例：タグにclass属性はありませんが、DOMプロパティclassNameは空の文字列値で存在します。

編集

一方を変更すると、もう一方はコントローラーによって変更され、その逆も同様です。このコントローラーはjQueryにはありませんが、ブラウザーのネイティブコードにあります。

Answer 5

混乱を引き起こすのは、HTML属性とDOMオブジェクトの違いにすぎません。DOM要素のネイティブプロパティなどを快適に操作できる人にとってthis.src this.value this.checkedは.prop、家族にとって非常に温かい歓迎です。他の人にとっては、それは混乱の追加層にすぎません。それを明確にしましょう。

との違いを確認する最も簡単な方法.attrは.prop、次の例です。

<input blah="hello">

1. $('input').attr('blah')：期待どおりに戻ります'hello'。ここに驚きはありません。
2. $('input').prop('blah')：戻り値undefined-実行しようとしているため[HTMLInputElement].blah-そのDOMオブジェクトにそのようなプロパティは存在しません。それは、その要素の属性としてスコープにのみ存在します。[HTMLInputElement].getAttribute('blah')

ここで、次のようないくつかの変更を行います。

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah')：'apple'えっ？これはその要素で最後に設定されたので、なぜ「梨」ではないのですか。プロパティは、DOM入力要素自体ではなく、入力属性で変更されたため、基本的には互いにほとんど独立して機能します。
2. $('input').prop('blah')： 戻り値'pear'

本当に注意する必要があるのは、上記の理由から、アプリケーション全体で同じプロパティに対してこれらの使用法を混在させないことです。

違いを示すフィドルを参照してください：http： //jsfiddle.net/garreh/uLQXc/

---

.attrvs .prop：

ラウンド1：スタイル

<input style="font:arial;"/>

• .attr('style')--一致した要素のインラインスタイルを返します。"font:arial;"
• .prop('style')--スタイル宣言オブジェクトを返します。CSSStyleDeclaration

ラウンド2：値

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')--戻り値'hello'*
• .prop('value')- 戻り値'i changed the value'

*注：このため、jQueryには.val()メソッドがあります。これは内部的には同等です。.prop('value')

Answer 6

TL;DR

ほとんどの場合、prop()overを使用します。attr()

プロパティは、入力要素の現在の状態です。属性はデフォルト値です。

プロパティには、さまざまなタイプのものを含めることができます。属性には文字列のみを含めることができます

Answer 7

汚いチェックネス

この概念は、違いが観察可能な例を提供します: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

やってみて：

• ボタンをクリックします。両方のチェックボックスがチェックされました。
• 両方のチェックボックスをオフにします。
• ボタンをもう一度クリックします。チェックボックスのみがpropチェックされました。バン！

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

disabledonのような一部の属性でbuttonは、 content 属性を追加または削除すると、disabled="disabled"常にプロパティ (HTML5 では IDL 属性と呼ばれます) が切り替わります。

無効化された IDL 属性は、無効化されたコンテンツ属性を反映する必要があります。

そのため、必要なく HTML を変更するので見苦しいですが、問題なく使用できる可能性があります。

checked="checked"onのような他の属性のinput type="checkbox"場合、クリックするとダーティになり、checked="checked"content 属性を追加または削除しても checkness がトグルされなくなるため、問題が発生します。

.propこれが、HTML の変更による複雑な副作用に頼るのではなく、有効なプロパティに直接影響するため、mostly を使用する必要がある理由です。

Answer 8

すべてはドキュメントにあります：

特定の状況では、属性とプロパティの違いが重要になる場合があります。jQuery 1.6 より前では、一部の属性を取得するときに .attr() メソッドがプロパティ値を考慮に入れることがあり、一貫性のない動作を引き起こす可能性がありました。jQuery 1.6 以降、.prop() メソッドはプロパティ値を明示的に取得する方法を提供し、.attr() は属性を取得します。

だから小道具を使ってください！

Answer 9

属性は HTMLテキスト ドキュメント/ファイルにあります(== これが解析された HTML マークアップの結果であると想像してください) のに対し、
プロパティは HTML DOM ツリーにあります(== 基本的に JS の意味でのオブジェクトの実際のプロパティ)。

重要なことに、それらの多くは同期されます (classプロパティを更新classすると、html の属性も更新されます。それ以外の場合)。ただし、一部の属性は予期しないプロパティに同期される場合があります。たとえば、属性は プロパティcheckedに対応するため、 defaultChecked

• チェックボックスを手動でチェックすると値が変更されますが、値.prop('checked')は変更されません.attr('checked').prop('defaultChecked')
• 設定$('#input').prop('defaultChecked', true)も変更さ.attr('checked')れますが、これは要素には表示されません。

経験則は次のとおりです。.prop()メソッドは、ブール属性/プロパティ、および html に存在しないプロパティ (window.location など) に使用する必要があります。他のすべての属性 (html で確認できるもの) は、引き続き.attr() メソッドで操作できます。( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

.prop()そして、ここにが好まれる場所を示す表があります(.attr()まだ使用できますが)。

---

.attr() の代わりに .prop() を使用したい場合があるのはなぜですか?

1. .prop()文字列、整数、ブール値など、任意の型を返すことができます。while.attr()は常に文字列を返します。
2. .prop()より約2.5倍速いと言われています.attr()。

Answer 10

attributes-> HTML

properties-> ドム

Answer 11

コードがそのように書かれている場合、ゲイリーホールの答えは問題を解決するのに非常に関連しています

obj.prop("style","border:1px red solid;")

prop 関数はCSSStyleDeclarationオブジェクトを返すため、上記のコードは一部のブラウザー (IE8 with Chrome Frame Plugin私の場合はテスト済み) では正しく動作しません。

したがって、次のコードに変更します

obj.prop("style").cssText = "border:1px red solid;"

問題を解決しました。