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

DOM 要素の属性とプロパティは混同されやすいため、明確に区別することはできませんが、密接に関連しています。過去の私を含め、多くの初心者の友人はよく混乱します。

属性は中国語で「特性」と訳され、プロパティは中国語で「属性」と訳されますが、中国語の文字通りの意味では、確かに若干の違いがあります。

Attribute は属性ノードです。各 DOM 要素には、すべての属性ノードを格納するための対応する属性があります。正確には、NameNodeMap です。コンテナと似ていますが、配列と同じコンテナではありません。属性の各数値インデックスには、名前と値のペア (name="value") の形式で属性ノードが格納されます。

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

hello

上記の div 要素の HTML コードには、クラス、ID、カスタム ゲーム ID が含まれています。これらの特性は、次の形式のような属性に保存されます:

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

[ class="box", id="box", gameid ="880 " ]

次のように属性ノードにアクセスできます:

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

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log ( elem.attributes[0].value ); // ボックス

しかし、IE6 ～ 7 では属性に多くのものが格納されており、上記のアクセス方法では標準ブラウザとは異なる結果が返されます。通常、属性ノードを取得するには、getAttribute メソッドを直接使用します。

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

console.log( elem.getAttribute('gameid') ) // 880

属性ノードを設定するには setAttribute メソッドを使用し、削除するにはremoveAttribute メソッドを使用します。

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

elem.setAttribute('testAttr', 'testVal') ;
console.log( elem.removeAttribute('gameid') ) // 未定義

属性ノードが追加または削除されると、属性は動的に更新されます。
Property はプロパティです。DOM 要素が通常の Object オブジェクトとみなされる場合、property は名前と値のペア (name="value") の形式でオブジェクトに格納されます。プロパティの追加と削除は、通常のオブジェクトと何ら変わりなく、はるかに簡単です:

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

elem.gameid = 880; //
console.log( elem.gameid ) // 取得
delete elem.gameid //

を削除

属性とプロパティが混同されやすい理由は、多くの属性ノードにも対応するプロパティ属性があるためです。たとえば、上記の div 要素の id とクラスは、どちらが使用されても属性であり、対応するプロパティでもあります。メソッドにアクセスして変更できます。

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

console.log( elem.getAttribute(' id') ); // ボックス
console.log( elem.id ); // ボックス
elem.id = 'hello';
console.log( elem.getAttribute('id') ) ; // こんにちは

しかし、カスタム属性ノードまたはカスタム プロパティの場合、この 2 つは互いに何の関係もありません。

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

console.log( elem.getAttribute('ゲーム ID') ); // 880
console.log( elem.gameid ) // 未定義
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // null

IE6 ～ 7 の場合、属性とプロパティの区別はありません:

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

console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900

多くの初心者の友人は、簡単にこの落とし穴に陥る可能性があります。
DOM 要素の一部のデフォルトの共通属性ノードには、対応するプロパティ属性があります。さらに特別なのは、一部のフォーム要素など、値がブール型である一部のプロパティです。

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

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ) // チェック済み
コンソール.log( radio.checked ) // true

これらの特別な属性ノードの場合、ノードが存在する限り、対応するプロパティの値は true になります。たとえば、

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

var radio = document.getElementById( ' radio' );
console.log( radio.getAttribute('checked') ); // 何でも
console.log( radio.checked ); // true

最後に、属性とプロパティをより適切に区別するために、属性ノードは HTML コードで表示され、プロパティは単なる通常の名前と値のペアの属性であると基本的に要約できます。

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

// ゲーム ID と ID は両方とも属性ノードです
//ID はプロパティを通じてアクセスおよび変更することもできます

hello

// areaid は単なるプロパティです
elem.areaid = 900;