属性と property_html/css_WEB-ITnose の違い

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

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

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

<div class="box" id="box" gameid="880">hello</div>

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

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

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

var elem = document.getElementById( 'box' );console.log( elem.attributes[0].name ); // classconsole.log( elem.attributes[0].value ); // box

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

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

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

elem.setAttribute('testAttr', 'testVal');console.log( elem.removeAttribute('gameid') ); // undefined

属性は属性として動的に更新されますノードが追加または削除されます。

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

elem.gameid = 880; // 添加console.log( elem.gameid ) // 获取delete elem.gameid // 删除

属性とプロパティが混同されやすい理由は、多くの属性ノードにも、対応するプロパティ属性があるためです。上記の div 要素の id と class は両方とも属性と対応するプロパティであり、どのメソッドが使用されるかに関係なくアクセスおよび変更できます。

すごいですね

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

console.log( elem.getAttribute('id') ); // boxconsole.log( elem.id ); // boxelem.id = 'hello';console.log( elem.getAttribute('id') ); // hello

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

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

初心者の友人の多くは、簡単にこの落とし穴に陥る可能性があります。

DOM 要素の一部のデフォルトの共通属性ノードには、対応するプロパティ属性があります。特別なのは、一部のフォーム要素など、値がブール型である一部のプロパティです。このノードの場合、対応するプロパティの値は次のように true です:

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

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