翻訳の違いを示すために、属性は一般的特性、プロパティを翻訳する属性に翻訳します。
上記を使用して、角度はその態度を持っています
テンプレートのプロパティとイベントとの作品を結合、 ない属性。
テンプレートではなく、属性よりも、プロパティとイベントを結合することによって動作します。
jQueryがあるprop()
とattr()
どのように選択するか、と言います...
二つの主流再生回数:
- いくつかの認識属性とプロパティについては、使用して
setAttribute()
プロパティの問題がclassNameの過去のクラスのマッピングであることを理由に、ない統一名前が表示されます。 - リトルレッドブックの作成者は、ブラウザで、より一貫性のあるトップのパフォーマンスので、操作するDOMプロパティをお勧めします。
HTML属性&DOMプロパティ関係との違い
角度の文書には、両者の関係との違いを要約するための通路を引用しました:
比較HTML DOMプロパティの属性と
属性はHTMLで定義されています。プロパティは、DOM(Document Object Model)が定義されています。
IDなど1マッピング、:1の間のHTML属性とプロパティの少量を持っています。
いくつかのHTML属性は、このようなCOLSPANとして、プロパティに対応していません。
無等のTextContentなどの属性を、対応するいくつかのDOMプロパティ。
一般原則:
- HTML属性の初期化DOMプロパティが、その後、彼らの任務は完了です。
- 属性の値を変更すると、再びDOMプロパティを初期化することと同じです。
- プロパティの値を変更して、プロパティ値の変更は、属性値は変更されません。
いくつかの代表的なマップ
HTML属性 | DOMプロパティ |
---|---|
ID | ID |
クラス | クラス名 |
確認=「チェックします」 | チェックした値はtrueです |
一般的な原則の障害が発生した場合
普遍的な原則のはなぜですか?低バージョン、すなわち、値の運転DOMプロパティ、属性に値も変更します。完全に不合理 - -
<input type="text" value="123" id="myInput">
HTML属性を変更します
myInput.setAttribute('value', 'test Attr');
ブラウザ | myInput.getAttribute( '値') | myInput.value |
---|---|---|
クロムIE11 FF | テストのAttr | テストのAttr |
IE8 | テストのAttr | テストのAttr |
変更DOMプロパティ
document.getElementById('myInput').value = 'test property';
ブラウザ | myInput.getAttribute( '値') | myInput.value |
---|---|---|
クロムIE11 FF | 123 | テストプロパティ |
IE8 | 性試験(一般的な原理の下で123であるべきです) | テストプロパティ |
prop()
そして、attr()
選択肢
-
prop()
プロパティDOMはモード、対応する変更、実質的にDOMのプロパティを変更するために使用されます。
原生DOM | jQueryの | オペレーティング |
---|---|---|
element.value | $ element.prop(名前[、値]) | 読み取りと書き込み |
削除element.propertyName | $ element.removeProp(propertyNameの) | [削除] |
-
attr()
実質的にDOMが設けられた操作対応の3つの方法の方法HTML属性、属性を変更するために使用されます。
原生DOM | jQueryの | オペレーティング |
---|---|---|
element.getAttribute(名) | $ element.attr(名) | 読みます |
element.setAttribute(名前、値) | $ element.attr(名前、値) | 書き込み |
element.removeAttribute(名前)を削除 | $ element.removeAttr(名) | [削除] |
概要
- カスタムプロパティ上のいくつかのラベルを取得し、またはほとんどの場合で使用する場合の基本的な特性を変更しない
attr()
(data-*
よう除きます)。
<form action="test.php" user-my-name="nilinli" method="post"></form>
$('form').attr('user-my-name'); // nilinli
$('form').attr('action'); // test.php
- と通常の状況下で、ページとそれ以外の場合には、操作DOMの相互作用、
prop()
- 一般的には、HTML属性を操作するために行く前に、DOMプロパティ(カスタム属性または全く関連マップ)だけではなく、DOMプロパティを操作してみてください。