What is the difference between setAttribute and dot notation in Javascript? [duplicate]

Question

Possible Duplicate:
When to use setAttribute vs .attribute= in JavaScript?

Why do you sometimes set an attribute like this:

x.type = "submit";

and other times like this:

x.setAttribute("type", "submit");

I always figured it didn't matter which way, but I'm having an issue doing this:

x.onClick = save;

but when I switch it to this it works:

x.setAttribute("onClick", "save()");

Related: stackoverflow.com/questions/8018814/…, stackoverflow.com/questions/3919291/… — Felix Kling
– Felix Kling, Commented Aug 9, 2012 at 15:34
x.onClick = save does not work because JavaScript is case-sensitive. The property is onclick: x.onclick = save;. HTML is not case-sensitive, so <... onclick="save()">, <... onClick="save()"> and <... ONCLICK="save()"> are all the same. — Felix Kling
– Felix Kling, Commented Aug 9, 2012 at 15:36
This might help as well to understand the differences between HTML attributes and DOM properties: stackoverflow.com/questions/6003819/… — Felix Kling
– Felix Kling, Commented Aug 9, 2012 at 15:47

Lèse majesté · Accepted Answer · 2012-08-09 15:36:51Z

4

setAttribute only works on DOM elements and lowercases the attribute name on HTML elements. And you can't use dot notation to assign values to dynamic attribute names.

And there's also this:

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).

answered Aug 9, 2012 at 15:36

Lèse majesté

8,0753 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

LJM Over a year ago

So as a general rule, if I experience the save issue I had above, it's probably a casing issue on the property itself and I need to investigate there first?

Lèse majesté Over a year ago

@LJM: If it's an HTML element, yes.

Felix Kling Over a year ago

@LJM: Interacting with the DOM directly is the preferred way. All that you are doing with setAttribute is to add a new or change a attribute node and the browser will update the properties of the DOM element accordingly. Accessing these properties directly makes more sense.

LJM Over a year ago

So, as I understand it, calling setAttribute will update the underlying HTML. The browser will then refresh the DOM element. So by using setAttribute, we're actually going out of our way when we could just update the DOM directly?

Felix Kling Over a year ago

@LJM: It's not updating the HTML, since this is simply text, but I think you basically understood it. The browser creates a DOM from the HTML. For each attribute of an HTML element, the browser creates a corresponding attribute node. Then the properties of the corresponding element node are initialised based on the values of its attribute nodes. If you add or change an attribute node, the browser updates the properties accordingly. Not for all attributes, but for most of them afaik. To come back to your actually question, the dot notation is just one way of accessing properties in JavaScript

|

Collectives™ on Stack Overflow

What is the difference between setAttribute and dot notation in Javascript? [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related