JavaScriptの中のpropertyとatribute

クリックしてリンクを開く
atributeは中国語の用語を「特性」と訳し、propertyは中国語の用語を「属性」と訳しています.中国語の字面の意味から見れば、確かに違いがあります.とりあえずatributeについて説明します.atributeは特性ノードであり、各DOM要素は対応するatributes属性を持っています.すべてのatributeノードを保存します.他のものと区別する特質/特性をもっと強調します.
atributesは正確に言えばNameNodeMapです.つまり同じ配列ですが、配列とは違った容器です.atributesの各数字インデックスは、ペアの名前の形で、atributeノードを格納しています.

 
  
<div class="box" id="box" gameid="880">hello</div>
 のdiv  のHTMLコードにはclass、idとカスタムのgameidがあります.これらの  はすべてatributesに  されています.  のような です.
 
  
[ class="box", id="box", gameid="880" ]
このようにしてatributeノードにアクセスできます.
 
  
var div=document.getElementById("box");
console.log(div.attributes[0].name);//            class
console.log(div.attributes[0].value);
しかし、IE 6-7は くのものをatributesに けています.  のアクセス  と  ブラウザの    はまた っています.  は1つのatributeノードを  し、  getAttribute  を  する.
atributeノードをセットするにはsetAttribute  を います.  するにはremoveAttributeを います.
div.setAttribute("testA","testV");
console.log(div.removeAttribute("testA");//undefined
atributesは、  または  に い、atributeノードが  に  されます.propertyは つの  であり、DOM  を  のObjectオブジェクトと なすと、propertyは  と のペアでObjectに  される  である.propertyの  と  も  に くなりました.  のオブジェクトと じです.
 
  
div.gameid=880;//  
console.log(div.gameid);//  
delete div.gameid;//  
atributeとpropertyが  しやすい  は、 くのatributeノードに  するproperty  があります. えば、 のdiv  のidとclassはatributeであり、  するpropertyがあります.どの  を ってもアクセスと  ができます.
 
  
 console.log( div.getAttribute('id') ); // box 
  
 console.log(div.id ); // box 
  
 div.id = 'hello'; 
  
 console.log( div.getAttribute('id') ); // hello 
  
 
 
しかし、カスタムのatributeノード、またはカスタムのpropertyについては、  は   です.
 
  
 
  console.log( elem.getAttribute('gameid') ); // 880
 console.log( elem.gameid ); // undefined
 elem.areaid = '900';
 console.log( elem.getAttribute('areaid') ) // null 
  
 
 
IE 6-7にとって、atributeとpropertyは  されていません.
 
  
 console.log( elem.getAttribute('gameid') ); // 880 
  
 console.log( elem.gameid ); // 880 
  
 elem.areaid = '900'; 
  
 console.log( elem.getAttribute('areaid') ) // 900 
  
 
 
 くの  の  はこの に ちやすいと います.DOM  のいくつかのデフォルトの   なatributeノードは、  するproperty  を しています.  なのは、いくつかのフォーム  のようなBooleanタイプのpropertyの です.
 
  
 <input type="radio" checked="checked" id="raido"> 
  
 var radio = document.getElementById( 'radio' ); 
  
 console.log( radio.getAttribute('checked') ); // checked 
  
 console.log( radio.checked ); // true 
  
 
 
これらの  なatributeノードに しては、このノードのみが  し、  するpropertyの はtrueである.
 
  
 <input type="radio" checked="anything" id="raido"> 
  
 var radio = document.getElementById( 'radio' ); 
  
 console.log( radio.getAttribute('checked') ); // anything 
  
 console.log( radio.checked ); // true 
  
 
 
  に、atributeとpropertyをよりよく  するために、   にはatributeノードとしてまとめられます.これはHTMLコードで られますが、propertyは  の  と  のペアです.
//gameidとidはいずれもatributeノードです.
//idは  にpropertyを じてアクセスと  ができます.
＜div gameid=“880”id=“box”hello
//araidはpropertyだけです.
elem.araid=900