Javascript: setAttribute() v.s. element.attribute = value to set "name" attribute

Asked 8/12, 2011 at 5:14 Answered 28/1, 2018 at 19:4

Solved javascript setattribute getelementsbyname

So I'm learning to manipulate the DOM and I noticed one interesting thing:

Let's say I want to set the name attribute of an element by using the "." dot notation:

element.name = "someName";
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??

However if I use the document.setAttribute() method, it works fine:

element.setAttribute("name", "someName");
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.

Not sure why the dot notation method doesn't work in the first case.

Why does this happen?

Redroot answered 8/12, 2011 at 5:14 Comment(3)

Generally try to avoid using getElementsByName – Geostatic 8/12, 2011 at 6:37

Why should one avoid using getElementsByName? – Resultant 2/10, 2012 at 21:58

Attributes ARE accessible using dot notation if that is how you wish to access them. If you wish to access attributes using dot notation you need to refer to obj.attributes.attributeName to retrieve the attribute and obj.attributes.attributeName.value to manipulate its value. It's long winded when compared with setAttribute or getAttribute. and not recommended as a solution, but regardless of that, a full answer to your question "Why doesn't dot notation work in the first case" - has to include "it does. You were just looking in the wrong place for the attributes and their values." – Morna 24/3, 2013 at 13:9

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.

Shipper answered 8/12, 2011 at 5:20 Comment(3)

Sir when I set some html element attribute as "undefined" , it does not work, and it continues to take its previous values. Can you tell me why is so ? – Attica 12/8, 2017 at 6:7

@SurajJain Probably because the API doesn't allow the attribute to be undefined. – Shipper 13/4, 2018 at 10:19

Almost a year passed . – Attica 13/4, 2018 at 18:12

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

Morna answered 24/3, 2013 at 16:50 Comment(0)

(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");

Ullyot answered 5/6, 2015 at 11:58 Comment(0)

<head>
<script>
function test($count) {
document.getElementById("test1").setAttribute("name","file-upload_" + $count);
}
</script>
</head>
<body>

<p>some content</p>
<input id="test1" type="file" name="file-upload" id="file-upload" />
<p>some other content</p>
<script>test(1);</script>
</body>

Fleck answered 30/9, 2013 at 1:54 Comment(0)

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.

Skeet answered 28/1, 2018 at 19:4 Comment(0)

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.

but,

while using, element.setAttribute('name','someName'), you are actually setting the attribute 'name'.

IE8 and below treats the property and attribute as same, the bug has been fixed in IE9 and above.
Safari, FireFox, Chrome treat property and attribute differently.

However, you can always create a new property of your choice if you wish to do so.

Lura answered 22/3, 2013 at 12:20 Comment(1)

partial answer ... limited and does not explain the reasoning behind the problem – Morna 24/3, 2013 at 22:44

Recommended topics

Hot tags