web-dev-qa-db-ja.com

JQuery $（this）.attr（ "name"）とthis.name

主な違いは何ですか

$(this).attr("name")

そして

this.name

そして、技術的な説明は何ですか？

javascriptjquerythisattr
14
Sameera Thilakasiri

1つ目は、DOM要素から形成されたjQueryオブジェクトから属性値を取得します。 2番目はDOM要素から直接プロパティを取得するため、より高速です。可能な場合は、ネイティブプロパティを使用する必要があります。

17
Rory McCrossan

まあ、私はあなたが考えているに違いないことを知っています...それはパフォーマンスの問題です...しかしいいえ。信頼性の問題です。

JavaScriptを介してDOMにアクセスする場合、DOMに直接アクセスすることはできません。取得できるのは、W3CのHTML仕様で定義されているインターフェースです。

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-798055546

HTMLElementインターフェイスは、このプロパティのみを定義します。

interface HTMLElement : Element {
    attribute DOMString       id;
    attribute DOMString       title;
    attribute DOMString       lang;
    attribute DOMString       dir;
    attribute DOMString       className;
};

したがって、インターフェイスにプロパティ「名前」が定義されている要素（ほとんどの場合は入力）で「this.name」onlyを呼び出すことができます。

この単純なコードは、何が問題になるかを理解するのに役立ちます。

<a fakeAttr="Hola" id="myAnchor" data-mytext="Anyone?">Link</a>


$(function(){

  /* This gives you undefined */
  alert('Direct access: ' + $('#myAnchor')[0].fakeAttr);

  /* This gets the work done */
  alert('jQuery access: ' + $('#myAnchor').attr('fakeAttr'));

  $('#myAnchor').click(function(){

     /* This is of course empty */
     alert(this.fakeAttr);
  });
});

http://jsbin.com/ganihali/1/edit

ブラウザがjavascript-DOMプロキシオブジェクトを構築する方法は異なる場合があります... IE以前は開発者と親しみやすく、DOMからすべてを解析して、すぐに使用できるオブジェクトとして開発者に提供していましたプロパティです。しかし、それは先史時代でしたが、現在のところ、カスタムプロパティを提供するブラウザはありません。データ属性（HTML5も有効）も使用できません。

そのため、エラーが発生しやすいプロパティへのアクセスを高速化し、フレームワークを使用するように細心の注意を払っています（その理由はあります）。

5
Adrian Salazar