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

Question

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?

Answer 1

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.