[removed] setAttribute() v.s. element.attribute =

2019-01-11 23:13发布

站内问答 / JavaScript
1878 6 5

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?

6条回答
看我几分像从前
2楼-- · 2019-01-11 23:55

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

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
3楼-- · 2019-01-12 00:01

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.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-01-12 00:04

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

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
5楼-- · 2019-01-12 00:05

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

*** The property

When you use, element.name, you are accessing a 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 too

Example 2:
var h1 = document.getElementById("H1"); 
h1.setAttribute("class", "democlass");

Example 3:
var d = document.getElementById("d1"); 
d.setAttribute("name1", "value1");
查看更多
0人赞 添加讨论(0) 举报
干净又极端
6楼-- · 2019-01-12 00:17

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.

查看更多
0人赞 添加讨论(0) 举报
Anthone
7楼-- · 2019-01-12 00:18 
<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)