difference between setAttribute and htmlElement.attribute='value'

Question

what would be the difference between the two ,

b1.setAttribute('id','b1');

and

b1.id='b1';

is one of them more efficient than the other ? and do both of them will do exactly the same task ? and will they be different in some situations ?

Nmr

More important to understand the different effect that it may have, which depends on the attribute being set. In the vast majority of cases, it's better (simpler and more consistently supported) to set the property directly, unless you have a particular reason to set the attribute (and can deal with the various quirks associated with doing that). – Microlith

Answer 1

difference between setAttribute and htmlElement.attribute='value'

That latter bit, htmlElement.attribute='value', isn't quite accurate. You're not setting an attribute there, you're setting a property.

DOM element instances in memory have various properties, some of which connect to or relate to attributes and others which don't.

Attributes, on the other hand, are name/value pairs that are read directy from the HTML markup (and if you serialize a DOM element, for instance by accessing its innerHTML property, are written to the markup you get back).

When the property and attribute are related/linked in some way, the property is called a reflected property (of the attribute). Sometimes, the reflected property's name isn't quite the same as the attribute's name (class becomes className, for becomes htmlFor), and sometimes the link between them isn't 1:1.

So for instance, id is a reflected property of the id attribute. But select boxes have a selectedIndex property for which there's no attribute.

do both of them will do exactly the same task ?

and will they be different in some situations ?

It depends on the attribute/property:

• id and several others are directly reflected: Setting the id property and setting the id attribute do exactly the same thing. Offhand, this is also true of the htmlFor property / for attribute (except on old IE which has bugs in setAttribute there), the rel property/attribute, the className / class attribute (except on old IE which has bugs in setAttribute there), the name attribute on form fields and some other elements, the method and action properties/attributes on forms, and several others.

• The value property, on the other hand, doesn't set the value attribute at all. It just gets its default value from it. On most browsers ("all" at this point?), there's a separate defaultValue property which does directly reflect the value attribute.

• The href property is slightly different from the href attribute in relation to relative vs. absolute links. The attribute can contain a relative path, and using str = elm.getAttribute("href") gives you that relative path; if you read the property (str = elm.href), it will always be an absolute path (e.g., the resolved path). Setting the href property to a relative path sets the attribute to that path, but again reading teh href property will give you the absolute (resolved) version. Setting the href property to an absolute path will set the attribute to that absolute path.

• There are several boolean properties which are represented as booleans (true/false), but since attribute values are always strings, the attribute is either not there for false (getAttribute returns null) or there for true. If it's there, it must have the value "" or the same as its name (e.g., multiple="multiple", case-insensitive), although in practice browsers treat any present attribute as true regardless of its actual content.

• Several properties aren't reflected in attributes at all, so setting them doesn't set/change any attribute.

is one of them more efficient than the other ?

It's never going to make a big enough difference to care, so it doesn't matter. It also probably varies dramatically by browser.

Tress

I think the downvoter ment If it's there, it must have the value "" or the same as its name (e.g., multiple="multiple", case-insensitive)". This is true, though, according to this answer https://mcmap.net/q/36829/-what-is-the-correct-value-for-the-disabled-attribute, it obviously get interpreted slightly different based on if it is XHTML or HTML5. – Alcinia

@LGSon: That sentence wasn't there when the answer was downvoted. :-) In any case, that relates to markup, not the value the attribute can have when you interact with it via JavaScript. The downvote could have been because someone thought the answer lacked detail, or it could be one of a string of random downvotes I've been getting the last several days (including another contemporaneous with this one, on an answer from years ago). – Tress