95

のような式と同じものElement.getAttribute("id")をElement.id返します。

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

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

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

4

7 に答える 7

131

getAttributeDOM要素の属性を取得し、この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のプロパティには別のケースがありcheckedます。DOMプロパティはtrue、またはfalse属性が文字列"checked"または空の文字列を返す間を返します。

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

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

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

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

より詳細な説明が必要な場合は、このページを読むことを強くお勧めします。ほんの数分で完了しますが、情報（ここで要約しました）に満足するでしょう。

于 2012-04-23T12:25:02.493 に答える
12

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

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

  • <a href="/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がオブジェクトになります
于 2012-04-23T13:24:05.107 に答える
3

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

于 2012-04-23T12:12:02.270 に答える
3

このjsPerfテスト によると、プロパティgetAttributeよりも低速ですid。

PS

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

于 2012-04-23T12:13:50.570 に答える
3

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

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

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

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

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

于 2012-04-23T12:21:05.610 に答える
0

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

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

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

于 2017-03-20T06:20:14.463 に答える
0

これが大きな違いを生む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の属性セレクター（）によって選択されていません。

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

于 2017-04-27T00:52:34.547 に答える