getAttribute（）対Elementオブジェクトのプロパティ？

式は同じものElement.getAttribute("id")をElement.id好み、同じものを返します。

HTMLElementオブジェクトの属性が必要な場合、どちらを使用する必要がありますか？

getAttribute()andのようなこれらの方法でクロスブラウザの問題はありますsetAttribute()か？

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

getAttribute取り出し属性 DOM要素の、しばらくel.id取り出しプロパティこのDOM要素の。彼らは同じではありません。

ほとんどの場合、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のcheckedプロパティには別のケースがあります。DOMプロパティが返すtrueかfalse、属性が文字列"checked"または空の文字列を返します。

そして、一方向のみに同期されるいくつかのプロパティがあります。最良の例は、要素のvalueプロパティですinput。DOMプロパティを通じてその値を変更しても、属性は変更されません（編集：最初のコメントで精度を確認してください）。

これらの理由により、ブラウザー間で動作が異なるため、属性ではなくDOM プロパティを引き続き使用することをお勧めします。

実際には、属性を使用する必要があるのは2つの場合のみです。

1. DOMプロパティと同期されていないため、カスタムHTML属性。
2. プロパティから同期されない組み込みのHTML属性にアクセスするには、その属性（たとえば、元valueのinput要素）が必要であることを確認してください。

より詳細な説明が必要な場合は、このページを読むことを強くお勧めします。ほんの数分で完了しますが、ここでまとめた情報に喜ばれます。

getAttribute('attribute') 通常は、ページのHTMLソースで定義されているとおりに、属性値を文字列として返します。

ただし、element.attribute属性の正規化された値または計算された値を返す可能性があります。例：

• <a href="https://stackoverflow.com/foo"></a>
  • a.hrefには完全な URL が含まれます
• <input type="checkbox" checked>
  • input.checkedはtrueになります（ブール値）
• <input type="checkbox" checked="bleh">
  • input.checkedはtrueになります（ブール値）
• <img src='http://dummyimage.com/64x64/000/fff'>
  • 画像が読み込まれる前の img.widthは0（数値）になります
  • 画像（またはその最初の数バイト）が読み込まれると、img.widthは64（数値）になります
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.widthは計算された 50％になります
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.widthは50（数値）になります
• <div style='background: lime;'></div>
  • div.styleはオブジェクトになります

.id関数呼び出しのオーバーヘッドを節約します。（非常に小さいですが、あなたが尋ねました。）

このjsPerfテストに よるとgetAttribute、idプロパティよりもテストが遅くなります。

PS

奇妙なことに、両方のステートメントはIE8で非常に悪いパフォーマンスを示します（他のブラウザーと比較して）。

特定の理由がない限り、常にプロパティを使用してください。

• getAttribute()そしてsetAttribute()、古いIE（およびそれ以降のバージョンで互換モード）で壊れています
• プロパティはより便利です（特に、ブール属性に対応するプロパティ）

いくつかの例外があります：

• <form>要素の属性へのアクセス
• カスタム属性へのアクセス（ただし、カスタム属性の使用はお勧めしません）

私はこの件についてSOで数回書いています：

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

以下の例を試して、これを完全に理解してください。以下のDIVの場合

<div class="myclass"></div>

Element.getAttribute('class')戻りますmyclassが、あなたは使用する必要がElement.classNameDOMプロパティから、それを取得します。

これが大きな違いを生む1つの領域は、属性に基づくCSSスタイリングです。

以下を検討してください。

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

カスタムプロパティを直接設定したdivは、属性の値を反映せずdiv[custom]、CSSの属性セレクター（）によって選択されません。

setAttributeただし、を使用してカスタム属性を設定したdivは、css属性セレクターを使用して選択し、それに応じてスタイル設定できます。