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 ?

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.