JavaScriptのプロパティと属性の違いを詳しく紹介_基礎知識

1. 定義

プロパティ: 属性。すべての HTML 要素は HTMLElement タイプで表され、HTMLElement タイプは Element から直接継承し、いくつかの属性を追加します。id、title、lang、および各 HTML 要素の 5 つの標準特性に対応します。ディレクトリ、クラス名。 DOM ノードはオブジェクトであるため、他の JavaScript オブジェクトと同様にカスタム プロパティやメソッドを追加できます。プロパティの値は任意のデータ型にすることができ、大文字と小文字が区別されます。カスタム プロパティは HTML コードには表示されず、js にのみ存在します。

属性: 属性はプロパティとは異なり、文字列のみにすることができ、大文字と小文字は区別されません。innerHTML に表示され、すべての属性はクラス配列属性を通じてリストできます。

2. 類似点

標準の DOM プロパティと属性は同期されます。認識された (カスタムではない) プロパティは、属性の形式で DOM オブジェクトに追加されます。たとえば、id、align、style などです。このとき、プロパティを操作することも、getAttribute() などの特性を操作する DOM メソッドを使用して属性を操作することもできます。ただし、getAttribute() に渡される属性名は実際の属性名と同じです。したがって、classの属性値を取得する際には、「class」を渡す必要があります。

3. 違い

1) 一部の標準機能の操作では、getAttribute とドット (.) で取得される値に違いがあります。 href、src、value、style、onclick、その他のイベント ハンドラーなど。
2).href: getAttribute は href の実際の値を取得しますが、ドットは完全な URL を取得するため、ブラウザーに違いがあります。

コードをコピーします コードは次のとおりです:

<スクリプト>
var a = document.body.children[0]
a.href = '/'
alert( 'attribute:' a.getAttribute('href') ) // '/'
alert( 'property:' a.href ) // IE: '/'、その他: 完全な URL

src の値の取得は href と似ていますが、IE は完全な URL も返します。
この値には、「一方向」同期のためのいくつかの組み込みプロパティもあります。
たとえば、input.value は属性から同期されます (つまり、プロパティは属性から同期されます)

コードをコピーします コードは次のとおりです:

<スクリプト>
var input = document.body.children[0];
input.setAttribute('value', 'new');
alert( input.value ); // 'new'、input.value が変更されました
alert( input.getAtrribute(value) ); // 'new'

ただし、属性はプロパティから同期できません:

コードをコピー コードは次のとおりです:

<スクリプト>
var input = document.body.children[0];
input.value = '新しい';
alert(input.getAttribute('value')); // 'マークアップ'、変更されません!

getAttribute は初期値を取得しますが、ドットは .value の初期値または変更された値を取得します。たとえば、訪問者が特定の文字を入力すると、プロパティが更新された後、「value」属性は元の値を維持します。元の値は、入力が変更されたかどうかを確認したり、リセットしたりするために使用できます。

style や onclick などのイベント ハンドラーの場合、getAttribute メソッドはアクセス時に文字列を返し、ドットは対応するオブジェクトとイベント処理関数を返します。

入力のチェックされた属性の場合

コードをコピー コードは次のとおりです:

<スクリプト>
var input = document.body.children[0]
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // 空の文字列

getAttribute は、実際に設定した値を取得します。ドットはブール値を返します。

ブラウザの互換性の違い

1. IE 2. IE

コードをコピーします コードは次のとおりです:

document.body.abba = 1 // プロパティを割り当てます (getAttribute で読み取れるようになりました)
document.body.ABBA = 5 // プロパティを別のケースに割り当てます
// 大文字と小文字を区別しない方法で 'ABba' という名前のプロパティを取得する必要があります。
alert( document.body.getAttribute('ABba') ) // 1

物件を優先

実際のアプリケーションでは、DOM 操作の 98% でプロパティが使用されます。
属性を使用する必要がある状況は 2 つだけです

1. HTML 属性は DOM プロパティと同期されないため、カスタマイズします。
2. 組み込みの HTML 属性にアクセスします。プロパティからは同期できません。たとえば、INPUT タグの値です。