el.valueとel.getAttribute(「value」)の違い

querySelectorを使用してDOMオブジェクトを見つけた後、このオブジェクトのプロパティ値、例えばinputのvalue値が必要な場合は、el.valueとel.getAttribute(「vaue」)を使用して得られた結果と同じようになります.では、なぜこの2つの見た目が悪くない方法があるのでしょうか.この2つの方法には何か違いがありますか?
実はこの2つの見た目の差が少ない方法は定義的に全く違います.getAttributeはHTML要素のプロパティを返し、el.valueはDOMオブジェクトに定義されたvalueプロパティを返します.中国語はすべて属性に訳すため、比較的に混同しやすくて、英語の区別は比較的に明らかです:DOMの上で定義するのはproperty(DOMは1つのオブジェクトです)で、HTMLの上で定義するのはattributeです.
一般的にpropertyとattributeは1つ1つの対応関係であるため、一般的にel.getAttribute('value')とel.valueの結果は同じである.しかし、次の違いに注意してください.

propertyは、boolean、stringなどの

のような異なるタイプであってもよい.

attributeはすべてstring

console.log(typeof checkbox.checked);                    //boolean
console.log(typeof checkbox.getAttribute('checked'));    //string

一般的にpropertyとattributeの値は同じですが、a要素のhref属性:

などの異なる例もあります.

 

var a = document.getElementById('hey');    //  "/"
console.log(a.getAttribute('href'));       //           
console.log(a.href);

オブジェクトにデフォルト値がある場合、attributeは常にデフォルト値を返し、propertyはリアルタイムで更新されます.たとえばinput要素では、デフォルトのvalue値が設定されている場合、getAttributeは常にこのデフォルト値を返し、el.valueはユーザーの入力に従って更新されます.

これらの違いのため、attributeではなくdomオブジェクトのproperty(el.value)を使用することが一般的に推奨されています.要素のattributeは、次の2つの場合にのみ使用できます.

カスタムattributeにアクセスするとき(同期していないDOMオブジェクト)

attributeの値が本当に必要な場合(例えばinputが必要なデフォルト値を決定する場合)