Javascript: setAttribute() v.s. element.attribute = value to set "name" attribute
My guess (because you didn't specify the element type) is the element normally does not have a name
attribute, so setting the DOM property like that won't work.
For example, setting the name
property on an input
element will work. Setting it on a div
will not.
It will work, however, with setAttribute()
.
jsFiddle.
To extend the answers provided by some of the others ...
The attribute 'name' is only considered valid DOM for a few specific objects. According to https://developer.mozilla.org/en-US/docs/DOM/element.name those objects are:
<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>,
<map>, <meta>, <object>, <param>, <select>, and <textarea>
For these objects you can set, get and change the name attribute using object.name
BUT FOR ANY OTHER DOM OBJECT the attribute 'name' is a custom attribute and must be created using SetAttribute()
or by adding it to the HTML declaration. Once it is created, you can acces it using setAttribute()
and getAttribute()
or you can refer to its value directly using object.attributes.name.value
take a look at http://jsfiddle.net/radiotrib/yat72/1/ for an example. BTW - the alert box on load is intentional - check the code to see why ...
(Attempting to explain part of the above post a better, separately, since it is already went into -ve rating, and belief in that post will be less. Help improve this further if not better.)
*** The property
When you use, element.name, you are accessing an existing property
named "name" or setting its value.
Example 1:
var div1 = document.getElementById("div1");
div1.textContent = "2";
*** The attribute
but, while using, element.setAttribute('name','someName')
, you are actually setting the attribute
named 'name'.
This attribute can be an existing property OR a custom one we want:
Example 2:
var h1 = document.getElementById("H1");
h1.setAttribute("class", "democlass");
Example 3:
var d = document.getElementById("d1");
d.setAttribute("name1", "value1");