JavaScriptにおけるpropertyとatributeの違いを詳しく紹介します.

3455 ワード
1.定義
Property:プロパティ、すべてのHTML要素はHTMLEmentタイプによって表されています.HTMLEmentタイプは直接にElementから継承され、いくつかの属性が追加されています.これらの属性はそれぞれHTML要素に対応しています.DOMノードはオブジェクトであるため、他のJavaScriptオブジェクトと同様にカスタム属性および方法を追加することができる.propertyの値は任意のデータタイプであってもいいです.サイズ書きに敏感で、カスタムのpropertyはhtmlコードには現れません.jsのみ存在します.
特徴は、propertyと区別して、atributeは文字列だけで、大きさの書き込みは敏感ではなく、inners HTMLに現れて、クラスの配列を通じてatributesはすべてのatributeを羅列することができます.
2.同じところ
標準のDOM propertiesはアトリエと同期しています.公認の(カスタムではない)特性は、DOMオブジェクトに属性として追加されます.例えば、id、align、styleなどは、この時にプロのtyを操作したり、操作特性のDOM方法を使ってget Attribute()のように属性を操作することができます.getAttribute()に渡す特性名は、実際の特性名と同じです.したがって、クラスの特性値を取得するときには「クラス」に入ります.
3.違うところ
1)いくつかの標準的な特性の操作に対して、getAttributeとポイント番号(.)で取得した値に差異があります.例えば、href、src、value、style、onclickなどのイベントハンドラです.2)href:getAttributeが取得したのはhrefの実際値で、ポイント番号が取得したのは完全なurlで、ブラウザの違いがあります.
 
  
  
  <br>       var a  = document.body.children[0] 
  <br>       a.href = '/' 
  <br>       alert( 'attribute:' + a.getAttribute('href') ) // '/' 
  <br>       alert( 'property:' + a.href )  // IE: '/', others: full URL 
  <br>  
srcの値の取得はhrefに似ていますが、IEもfull URLに戻ります.value値には同じように「one-way」(一方向)同期の内蔵属性があります.例えば、input.valueは、atributeから同期する(すなわち、propertyは、atributeから同期を得る).
 
  
  
  
    
  <br>        var input = document.body.children[0]; 
  <br>        input.setAttribute('value', 'new'); 
  <br>        alert( input.value ); // 'new', input.value changed 
  <br>        alert( input.getAtrribute(value) ); // 'new' 
  <br>  
しかし、atributeはpropertyから同期を得ることができません.
 
  
  
  
     
  <br>         var input = document.body.children[0]; 
  <br>         input.value = 'new'; 
  <br>         alert(input.getAttribute('value'));  // 'markup', not changed! 
  <br>  
get Attributeは初期値を取得し、点番号は初期値または.value修正後の値を取得し、例えば、訪問者がある文字を入力した後、'value'atributeはproperty更新後に元の値を維持した.元の値はinputが変化するかどうかを確認するために使用されてもよいし、リセットされてもよい.
styleやonclickなどのイベントハンドラでは、getAttributeメソッドのアクセス時に文字列が返されますが、ポイント番号は対応するオブジェクトとイベントハンドラが返されます.
inputの中のchecked属性について
 
  
  
  <br>     var input  = document.body.children[0] 
  <br>     alert( input.checked ) // true 
  <br>     alert( input.getAttribute('checked') ) // empty string 
  <br>  
get Attributeで取得したのは、実際に設定した値です.ポイント番号はブール値を返します.
ブラウザの互換性の違い
1.IE＜9のブラウザでは、ポイント番号とgetAttributeを使って相互間でカスタマイズ属性にアクセスすることができます.2.IE＜8(IE 8種のIE 7互換モードを含む)は、propertyとatributeが同じです.atributeは大きさや書き込みに敏感ではないので、この場合はget Attributeでアクセスする特性がある場合、ブラウザは初めて出現する値を選択します.
 
  
 document.body.abba = 1 // assign property (now can read it by getAttribute) 
  
 document.body.ABBA = 5 // assign property with another case 
  
 // must get a property named 'ABba' in case-insensitive way. 
  
 alert( document.body.getAttribute('ABba') ) // 1
優先的にpropertyを選択します.
実際の応用では,98%のDOM動作はすべてpropertiesを用いている.二つの状況だけがatributesを使用する必要があります.
1.カスタムHTML atributesは、DOM propertyに同期していないからです.2.内蔵のHTML atributesにアクセスしてください.これらのatributeはpropertyから同期できません.例えばINPUTタグのvalue値です.
firefoxのinnerText,inners HTML,textContent,