jQuery Speed Test: $(this).attr("id"); vs this.id

Leading on from Speed Test $(this) vs .get() vs .eq() I decided to do a quick test to compare the speed of $(this).attr(“id”); vs this.id which can be used on native attributes such as id, src, href, style etc… but not on properties such as bgcolor, data, etc…

Background

Within context this changes but generally:

$(this) is a jQuery Object which has access to all the jQuery API
this is a reference to the DOM element

Use $(this) for DOM elements that have no yet been created.

Speed

this without the jQuery wrapper is slightly faster on the whole.

$(this).attr(“id”): 42ms
this.id: 1ms

View results: https://jsfiddle.net/jquery4u/F9rP7/

Frequently Asked Questions (FAQs) about jQuery Speed Test

Why does jQuery’s $(this).attr(‘id’) perform slower than this.id?

jQuery’s $(this).attr(‘id’) performs slower than this.id because it involves more processing. The $(this).attr(‘id’) method first creates a jQuery object from the DOM element, then it uses the attr() method to retrieve the id attribute. On the other hand, this.id directly accesses the id property of the DOM element, which is faster because it involves less processing.

What is the difference between $(this).attr(‘id’) and this.id in jQuery?

Both $(this).attr(‘id’) and this.id are used to get the id of an element in jQuery. However, $(this).attr(‘id’) is a jQuery method that gets the attribute value for only the first element in the matched set. It returns undefined for values of undefined attributes. On the other hand, this.id is a pure JavaScript property that gets the id of an element directly. It returns an empty string if the id is not defined.

Why is this.id returning undefined in my jQuery code?

If this.id is returning undefined, it could be because the element does not have an id attribute. Remember that this.id directly accesses the id property of the DOM element. If the id is not defined, it will return an empty string, not undefined. Check your code to ensure that the element has an id attribute.

How can I improve the performance of my jQuery code?

One way to improve the performance of your jQuery code is by minimizing the use of jQuery methods that involve more processing, such as $(this).attr(‘id’). Instead, you can use pure JavaScript properties like this.id that directly access the DOM element properties. Also, try to cache your jQuery objects, use event delegation, and chain your methods where possible.

Can I use this.id with other properties besides id?

Yes, you can use this.property with any property of a DOM element. For example, you can use this.className to get the class of an element, or this.innerHTML to get the inner HTML of an element. Remember that this.property directly accesses the property of the DOM element.

Is there a difference in compatibility between $(this).attr(‘id’) and this.id?

Both $(this).attr(‘id’) and this.id are compatible with all modern browsers. However, this.id, being a pure JavaScript property, is also compatible with older versions of Internet Explorer that do not fully support jQuery.

Why does this.id return an empty string instead of undefined?

In JavaScript, if a property is not defined on an object, accessing it will return undefined. However, DOM elements have a predefined set of properties, including id. If the id attribute is not set for a DOM element, accessing this.id will return an empty string, not undefined.

Can I set the id of an element using this.id?

Yes, you can set the id of a DOM element using this.id in JavaScript. For example, this.id = ‘newId’ will set the id of the element to ‘newId’. However, be careful when changing ids dynamically as it can lead to confusion and unexpected behavior in your code.

How can I get the id of an element using pure JavaScript?

You can get the id of a DOM element in pure JavaScript using the id property. For example, if you have a reference to a DOM element in a variable called element, you can get its id using element.id.

Why should I use this.id instead of $(this).attr(‘id’)?

Using this.id instead of $(this).attr(‘id’) can improve the performance of your code because it involves less processing. It directly accesses the id property of the DOM element, while $(this).attr(‘id’) involves creating a jQuery object and then using the attr() method to get the id.

jQuery Speed Test: $(this).attr(“id”); vs this.id