1。定義
プロパティ:すべてのHTML要素は、HTMLelementタイプで表されます。 HTMLelementタイプは、要素から直接継承し、いくつかの属性を追加します。追加された属性は、次の5つの標準特性を持つ各HTML要素に対応しています:ID、Title、Lang、dir、className。 DOMノードはオブジェクトであるため、他のJavaScriptオブジェクトのようなカスタムプロパティとメソッドを追加できます。プロパティの値は、任意のデータ型であり、ケースに敏感であり、カスタムプロパティはHTMLコードには表示されませんが、JSにのみ存在します。
属性:プロパティとは異なる機能、属性は文字列であり、ケース非感受性であり、innerHTMLに表示され、すべての属性はクラスアレイ属性を介してリストすることができます。
2。類似点
標準DOMプロパティは、属性と同期されます。認識された(非カスタム)属性がプロパティとしてDOMオブジェクトに追加されます。たとえば、ID、Align、Styleなど、現時点では、プロパティは、動作特性を使用するGetAttribute()などのプロパティまたはDOMメソッドを操作することで操作できます。ただし、getattribute()に渡された属性名は、実際の属性名と同じです。したがって、クラスの特徴的な値を取得する場合、「クラス」で渡す必要があります。
3。違い
1)。いくつかの標準特性については、getattributeとpoint(。)によって得られる値に違いがあります。 HREF、SRC、バリュー、スタイル、オンクリック、その他のイベントハンドラーなど。
2).href:getAttributeはHREFの実際の値を取得しますが、ドットは完全なURLを取得します。これにはブラウザの違いがあります。
コードコピーは次のとおりです。
<スクリプト>
var a = document.body.children [0]
A.href = '/'
alert( '属性:' + a.getAttribute( 'href'))// '/'
alert( 'property:' + a.href)// ie: '/'、others:full url
</script>
SRCの値はHREFに似ていますが、IEは完全なURLも返します。
値値には、「一方向」(一方向)の同期のためのいくつかの組み込みプロパティもあります。
たとえば、input.valueは属性から同期します(つまり、プロパティは属性から同期します)
コードコピーは次のとおりです。
<input type = "text" value = "markup">
<スクリプト>
var input = document.body.children [0];
input.setattribute( 'value'、 'new');
アラート(input.value); // 'new'、input.valueが変更されました
Alert(input.getAtrriobute(value)); // '新しい'
</script>
しかし、属性はプロパティから同期することはできません。
コードコピーは次のとおりです。
<input type = "text" value = "markup">
<スクリプト>
var input = document.body.children [0];
input.value = 'new';
alert(input.getAttribute( 'value')); //「マークアップ」、変更されていません!
</script>
GetAttributeは初期値を取得し、ドットは初期値または.Value変更された値を取得します。たとえば、訪問者が特定の文字に入ると、プロパティが更新された後、「値」属性は元の値を維持します。元の値を使用して、入力が変更されるかどうかを確認するか、リセットすることができます。
StyleやOnClickなどのイベントハンドラーの場合、Getattributeメソッドはアクセス時に文字列を返し、DOTは対応するオブジェクトとイベントハンドラー機能を返します。
入力のチェックプロパティ用
コードコピーは次のとおりです。
<スクリプト>
var input = document.body.children [0]
アラート(input.checked)// true
alert(input.getAttribute( 'checked'))//空の文字列
</script>
GetAttributeは、実際に設定している値を取得します。ポイントはブール値を返します。
ブラウザ互換性の違い
1。IE<9ブラウザーでは、ドット番号を使用して、互いにカスタムプロパティにアクセスするためにgetAttributeを使用できます。
2。IE<8(IE8 IE7互換モードを含む)、プロパティと属性は同じです。属性はケースに敏感ではないため、この場合、GetAttributeを使用して機能にアクセスする場合、ブラウザは初めて表示される値を選択します。
コードコピーは次のとおりです。
document.body.abba = 1 //プロパティを割り当てます(今すぐgetattributeで読むことができます)
document.body.abba = 5 //別のケースでプロパティを割り当てます
//ケースと感受性のある方法で「ABBA」という名前のプロパティを取得する必要があります。
alert(document.body.getAttribute( 'abba'))// 1
優先プロパティ
実際のアプリケーションでは、DOM操作の98%がプロパティを使用しています。
属性の使用を必要とする状況は2つしかありません
1. HTML属性は、DOMプロパティに同期されていないためにカスタマイズします。
2。プロパティから同期することはできない組み込みのHTML属性にアクセスします。たとえば、入力タグの値値。