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

javascript setattribute getelementsbyname
dkugappi picture dkugappi · Dec 8, 2011 · Viewed 75.5k times · Source

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

alex picture alex · Dec 8, 2011

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.

Related questions

JavaScript Adding an ID attribute to another created Element

I have some code here that will do the following. The code creates an element "p" then I append it to a "div" in the HTML. I would like that "p" I just created have an unique identifier (ID) and …

Read More
How to Set OnClick attribute with value containing function in ie8?

My goal is to change the onclick attribute of a link. I can do it successfully, but the resulting link doesn't work in ie8. It does work in ff3. For example, this works in Firefox 3, but not IE8. Why? <…

Read More
When to use setAttribute vs .attribute= in JavaScript?

Has a best-practice around using setAttribute instead of the dot (.) attribute notation been developed? E.g.: myObj.setAttribute("className", "nameOfClass"); myObj.setAttribute("id", "someID"); or myObj.className = "nameOfClass"; myObj.id = "someID";

Read More