プロパティ

ポイントの方法によって得られたDOMオブジェクトのプロパティ値

document.body.className //获取body的类名

それはカスタムプロパティのように、他のJSのオブジェクトのように保存することができるように、DOMオブジェクトは、オブジェクトであります

document.body.myData = {
    name : 'John'
}
document.body.sayHi = function(){
    alert('hello world');
}

console.log(document.body.myData.name);
console.log(document.body.sayHi());

プロパティとメソッドの定義が唯一のJSに表示されますので、HTMLには影響しません。

あなたはすべての標準およびカスタムproperyプロパティで...のために使用してトラバースすることができます

document.body.custom = 5;
var list = [];
for(var key in document.body){
    list.push([key, document.body[key]]);
}
console.log(list);

だから、カスタムDOMプロパティ：

任意の値が存在することができ、プロパティ名は大文字と小文字が区別されます
HTMLは影響しません。

属性

DOMノードは、HTML属性にアクセスするための方法を提供し、

 ele.hasAttribute(name) //>=ie8
 ele.getAttribute(name)
 ele.setAttribute(name)
 ele.removeAttribute(name) //>=ie8

注： 以下とIE8 IE8の互換モードでは、setAttributeメソッドが変更は、DOMプロパティ、ではない属性です

そして、財産のコントラスト、属性：

それだけで文字列を指定できます
名前は大文字と小文字を区別しません
これは、HTMLで表示されます。
あなたは、DOMは、すべての属性properyリストを属性を使用することができます

<body>
  <div about="Elephant" class="smiling"></div>

  <script>
    var div = document.body.children[0]
    console.log( div.getAttribute('ABOUT') ) // (1)
    
    div.setAttribute('Test', 123)   // (2)
    console.log( document.body.innerHTML )   // (3)
  </script>
</body>

プロパティと属性の同期

各オブジェクトは、標準のDOMノードの特性を有する3つの同期の可能性があります

標準のDOMプロパティと属性値は同じまま

document.body.setAttribute('id','pageWrap')
console.log(document.body.id) // pageWrap

標準のDOMプロパティと属性の値は、必ずしも厳密に同じではありません

<a id="test">测试</a>

<script>    
var a = document.getElementById('test');
a.href = '/';
console.log(a.getAttribute('href')); // '/'
console.log(a.href); // 完整链接，但ie7及以下'/' (若链接中有中文，ff和chrome下会转义),这是因为w3c规定href property必须为格式良好的链接
</script>

他のいくつかの属性は、このようなinput.checkedと同じ同期値は、ありません

<input type='checkbox' id='check' checked='aa'/>
<script>
var input = document.getElementById('check');
console.log(input.checked); //true
console.log(input.getAttribute('checked')) //'aa'
</script>

プロパティ値は、唯一の真または偽のかもしれinput.checkedが、属性値は任意の値のあなたの塗りつぶしを取得することです

組み込みのプロパティが一方向の同期でのいくつかの
例として、input.value同期value属性の値は、しかし、プロパティ値のvalue属性値が値を同期していない。
そして、入力ボックスのユーザーは入力値を変更した後、値がプロパティの値が変更され、value属性値変わらず。
```
<input type="text" id="text"/>
<script>
var input = document.getElementById('text');

input.setAttribute('value','hello');
console.log(input.value); //hello
console.log(input.getAttribute('value')); //hello

input.value = 'new';
console.log(input.value); //new
console.log(input.getAttribute('value')); //hello

input.setAttribute('value','other'); //此时再改变value attribute，value property不再变化
console.log(input.value); //other
console.log(input.getAttribute('value')); //other
</script>
```
したがって、初期値は、入力値がブロックに変更されたかどうかを決定するため、値属性入力ボックスを格納することができます
Properyと属性名が同期されていない
クラス/クラス名を
JSクラスではなくclassNameプロパティクラスのプロパティを使用するのでは、予約語なので、クラス属性であるためです。
```
document.body.setAttribute('class', 'big red bloom');
console.log(document.body.className); //big red bloom, 但ie8及以下输出为空
```
<IE9に加えて、他のブラウザでは、クラス属性を変更し、クラス名を変更します。互換性を確保するために、classNameプロパティで、クラス属性を使用しないでください。

概要

属性とプロパティは、重要な機能のDOMモデルです。

実際には、財産のシーンの98％は、属性には、次の2つのシナリオでのみ使用しました：

財産の使用として定義されたHTML属性は、HTMLに同期しないので。
必要なHTML属性、およびプロパティを構築し、同期していない、とあなたは、この属性を必要と確信していますする。Eg.input value属性。

以下のために翻訳しhttp://javascript.info/tutorial/attributes-and-custom-properties

異なるDOMオブジェクトの属性とプロパティの

プロパティ

属性

プロパティと属性の同期

概要

おすすめ