DOM要素の属性とプロパティは簡単に混ぜることができ、区別することはできません。 2つは異なるものですが、2つは密接に関連しています。過去の私を含む多くの新しい友人は、しばしばそれを理解していません。
属性は中国の用語「特性」に翻訳され、財産は中国の用語「属性」に翻訳されます。中国語の文字通りの意味から、実際に少し違いがあります。最初に属性について話しましょう。
属性は機能ノードです。各DOM要素には、すべての属性ノードを保存するための対応する属性属性属性があります。属性は、配列クラスのコンテナです。正確には、それはnamenodemapです。要するに、それは配列に似たコンテナですが、アレイとまったく同じではありません。属性の各数値インデックスは、属性ノードをname-valueペア（name =” value”）の形式で保存します。
コードを次のようにコピーします
上記のDIV要素のHTMLコードには、クラス、ID、およびカスタムGameIDが含まれます。これらの機能は、次の形式と同様に、属性に保存されます。
コードを次のようにコピーします：[、id = "box"、gameid = "880"]]
このような属性ノードにアクセスできます。
コードコピーは次のとおりです。
var elem = document.getElementById（ 'box'）;
console.log（elem.attributes [0] .name）; // クラス
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'））; // 未定義
属性は、属性ノードが追加または削除されると動的に更新されます。
プロパティはプロパティです。 DOM要素が通常のオブジェクトオブジェクトと見なされる場合、プロパティは、Name-Valueペア（name =”値”）の形式でオブジェクトに保存されているプロパティです。プロパティを追加および削除する方がはるかに簡単で、通常のオブジェクトと違いはありません。
コードコピーは次のとおりです。
elem.gameid = 880; // 追加
console.log（elem.gameid）// get
elem.gameid // deleteを削除します
属性とプロパティが簡単に混合できる理由は、多くの属性ノードが、上記のDIV要素のIDやクラスなど、対応するプロパティ属性を持っているためです。どちらも属性と対応するプロパティであり、どの方法を使用してもアクセスおよび変更できます。
コードコピーは次のとおりです。
console.log（elem.getattribute（ 'id'））; // 箱
console.log（elem.id）; // 箱
elem.id = 'hello';
console.log（elem.getattribute（ 'id'））; // こんにちは
ただし、カスタム属性ノードまたはカスタムプロパティの場合、2つは互いに何の関係もありません。
コードコピーは次のとおりです。
console.log（elem.getattribute（ 'gameid'））; // 880
console.log（elem.gameid）; // 未定義
elem.areaid = '900';
console.log（elem.getattribute（ 'aread'））// null
IE6-7の場合、属性とプロパティの間に区別はありません。
コードコピーは次のとおりです。
console.log（elem.getattribute（ 'gameid'））; // 880
console.log（elem.gameid）; // 880
elem.areaid = '900';
console.log（elem.getattribute（ 'aread'））// 900
多くの初心者はおそらくこのピットに簡単に落ちるでしょう。
DOM要素のいくつかの共通属性ノードには、対応するプロパティ属性があります。さらに特別なのは、いくつかのフォーム要素など、ブールタイプの値を持ついくつかのプロパティです。
コードコピーは次のとおりです。
<入力型= "Radio" checked = "checked" id = "raido">
var Radio = document.getElementById（ 'Radio'）;
console.log（radio.getAttribute（ 'checked'））; //チェックされています
console.log（radio.checked）; // 真実
これらの特別な属性ノードの場合、このノードが存在する場合にのみ、次のような対応するプロパティ値が真です。
コードコピーは次のとおりです。
<入力型= "Radio" checked = "Anything" id = "raido">
var Radio = document.getElementById（ 'Radio'）;
console.log（radio.getAttribute（ 'checked'））; // 何でも
console.log（radio.checked）; // 真実
最後に、属性とプロパティをより適切に区別するために、基本的に属性ノードがHTMLコードに表示され、プロパティは通常の名前と値ペアの属性にすぎないことを要約することができます。
コードコピーは次のとおりです。
// GameIDとIDの両方が属性ノードです
// IDにアクセスしてプロパティを介して変更することもできます
<div gameid = "880" id = "box"> hello </div>
// AreaIDは単なるプロパティです
Elem.Areaid = 900;