8

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()");
Community
  • 1
  • 1
LJM
  • 6,284
  • 7
  • 28
  • 30
  • 1
    Related: http://stackoverflow.com/questions/8018814/setting-a-property-via-property-or-setattribute, http://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript – Felix Kling Aug 09 '12 at 15:34
  • 1
    `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 Aug 09 '12 at 15:36
  • 2
    This might help as well to understand the differences between HTML attributes and DOM properties: http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html – Felix Kling Aug 09 '12 at 15:47

1 Answers1

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).

Lèse majesté
  • 7,923
  • 2
  • 33
  • 44
  • 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? – LJM Aug 09 '12 at 15:46
  • @LJM: If it's an HTML element, yes. – Lèse majesté Aug 09 '12 at 15:50
  • 1
    @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. – Felix Kling Aug 09 '12 at 15:51
  • 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? – LJM Aug 09 '12 at 15:55
  • @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 – Felix Kling Aug 09 '12 at 16:00
  • There are various issue with `setAttribute()` and `getAttribute()` which make it generally preferable to use properties instead. See other questions linked to in the comments. – Tim Down Aug 09 '12 at 16:14