15

What is the main different between 

$(this).attr("name")

and 

this.name

and What is the technical explanation?

Sameera Thilakasiri
  • 8,933
  • 8
  • 49
  • 80

2 Answers2

18

The first gets the attribute value from the jQuery object formed from the DOM element. The second gets the property directly from the DOM element, and is therefore quicker. You should use native properties where possible.

Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303
  • 1
    ... except `href` for links, where `this.href` will always return absolute URL. – VisioN Apr 17 '14 at 10:04
  • but it will make difference of 2 milliseconds only.When u mean Quicker ,It will be only 2 milliseconds quick ,not 10 minutes or half an hour Quicker than $(this).attr("name") .This should not make difference. – Pratik Apr 17 '14 at 10:05
  • 3
    @PratikJoshi the difference is minor, but why would you not want the best performance and shorter code? – Rory McCrossan Apr 17 '14 at 10:06
  • @RoryMcCrossan Keeping in mind that in some cases the result might be different :) – VisioN Apr 17 '14 at 10:07
  • 3
    *The second gets the attribute directly from the DOM element* - simply not true: the second is just calling a property getter, which not equals to its reflecting attribute's value. f.ex. `checked` attribute vs. `checked` property. – pozs Apr 17 '14 at 10:10
  • @PratikJoshi In what aspect you are saying like that? – Anoop Joshi Apr 17 '14 at 10:13
  • 1
    @RoryMcCrossan that's not semantics. In a question, where one needs to know what is a difference between a property and an attribute in DOM, these two words are not interchangeable. – pozs Apr 17 '14 at 10:24
5

Well, I know you must be thinking... it's a performance matter... but no. It is a matter of reliability.

When you access the DOM through javascript, you don't have direct access to the DOM, what you get is an interface, defined by the HTML Specification of the W3C.

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

The HTMLElement interface defines only this properties.

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

So you will be able to call "this.name" only on those elements whose interface have a property "name" defined (most likely inputs).

This simple code will give you the idea of what can go wrong.

<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

How the browser builds the javascript-DOM proxy object may vary... IE used to be friendlier with developers and parse everything from the DOM and then give it to the developer as a ready to use object property. But that was prehistoric era, nowadays no browser will give you custom properties. Not even data-attributes (HTML5 valid).

So I would be very careful on making my light-fast error-prone access to properties and use a framework (there's a reason for that).

Adrian Salazar
  • 5,275
  • 29
  • 48