[解決済み] getAttribute() vs Element オブジェクトプロパティ？

質問

以下のような表現があります。 Element.getAttribute("id") と Element.id は同じものを返します。

HTMLElementオブジェクトの属性が必要な場合、どちらを使うべきでしょうか？

これらのメソッドにクロスブラウザの問題はありますか？ getAttribute() と setAttribute() ?

または、オブジェクトのプロパティに直接アクセスする場合と、これらの属性メソッドを使用する場合のパフォーマンスへの影響はありますか？

どのように解決するのですか？

getAttribute は 属性 を、DOM 要素の el.id は プロパティ を取得します。両者は同じではありません。

ほとんどの場合、DOMプロパティは属性と同期しています。

しかし、同期の は同じ値を保証するものではありません。 . 典型的な例としては el.href と el.getAttribute('href') をアンカー要素とする。

例えば

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

このような動作が起こるのは W3C によると、href プロパティは整形されたリンクでなければなりません。ほとんどのブラウザはこの標準を尊重しています（そうでないブラウザを想像してみてください）。

にはもう一つのケースがあります。 input 's checked のプロパティがあります。DOM プロパティが返す true または false という文字列を返しますが、属性は "checked" または空の文字列を返します。

そして、同期されるプロパティとして 一方通行のみ . その最たる例が value プロパティの input 要素で使用できます。DOMプロパティを通してその値を変更しても、属性は変更されません（編集：より正確には最初のコメントを確認してください）。

これらの理由から、私はDOMの プロパティ を使用し、属性は使用しないことをお勧めします。

現実には、属性を使う必要があるのは2つのケースだけです。

1. DOM プロパティに同期していないため、カスタム HTML 属性。
2. プロパティから同期されていない、組み込みの HTML 属性にアクセスするために、その属性が必要であることが確実な場合（例えば、オリジナルの value の input 要素) の中にある。

より詳細な説明をお望みでしたら、ぜひとも このページ . 数分しかかかりませんが、その情報（ここにまとめたもの）に満足することでしょう。