Javascript：setAttribute() vs element.attribute = value 设置“name”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8426461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: setAttribute() v.s. element.attribute = value to set "name" attribute
提问by dkugappi
So I'm learning to manipulate the DOM and I noticed one interesting thing:
所以我正在学习操作 DOM 并且我注意到一件有趣的事情：
Let's say I want to set the nameattribute of an element by using the "." dot notation:
假设我想name使用“.”设置元素的属性。点符号：
element.name = "someName";
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??
However if I use the document.setAttribute()method, it works fine:
但是，如果我使用该document.setAttribute()方法，它可以正常工作：
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?
为什么会发生这种情况？
回答by alex
My guess (because you didn't specify the element type) is the element normally does not have a nameattribute, so setting the DOM property like that won't work.
我的猜测（因为你没有指定元素类型）是元素通常没有name属性，所以像这样设置 DOM 属性是行不通的。
For example, setting the nameproperty on an inputelement will work. Setting it on a divwill not.
例如，name在input元素上设置属性将起作用。将它设置在 a 上div不会。
It will work, however, with setAttribute().
但是，它将与setAttribute().
回答by Radiotrib
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.namethose objects are:
属性 'name' 仅被视为少数特定对象的有效 DOM。根据https://developer.mozilla.org/en-US/docs/DOM/element.name这些对象是：
<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.nameBUT 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.valuetake 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 ...
对于这些对象，您可以使用object.nameBUT FOR ANY OTHER DOM OBJECT设置、获取和更改 name 属性，属性“name”是自定义属性，必须使用SetAttribute()或通过将其添加到 HTML 声明来创建。一旦它被创建，你可以使用它来访问它setAttribute()，getAttribute()或者你可以直接使用它来引用它的值，object.attributes.name.value以查看http://jsfiddle.net/radiotrib/yat72/1/为例。顺便说一句-加载时的警报框是故意的-检查代码以了解原因...
回答by Manohar Reddy Poreddy
(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.)
（试图更好地单独解释上述帖子的一部分，因为它已经进入 -ve 评级，并且对该帖子的信任会减少。如果不是更好，请帮助进一步改进。）
*** The property
*** 这 property
When you use, element.name, you are accessing an existing propertynamed "name" or setting its value.
当您使用 element.name 时，您正在访问一个现有的property名为“name”或设置它的值。
Example 1:
var div1 = document.getElementById("div1");
div1.textContent = "2";
*** The attribute
*** 这 attribute
but, while using, element.setAttribute('name','someName'), you are actually setting the attributenamed 'name'.
This attribute can be an existing property OR a custom one we want:
但是，在使用, 时element.setAttribute('name','someName')，您实际上是在设置attribute命名的“名称”。此属性可以是现有属性或我们想要的自定义属性：
Example 2:
var h1 = document.getElementById("H1");
h1.setAttribute("class", "democlass");
Example 3:
var d = document.getElementById("d1");
d.setAttribute("name1", "value1");
回答by Billy senders
when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.
当您使用 element.name 时，您正在访问该属性/创建一个名为“name”的属性并设置其值。
回答by OBV
<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>
回答by Nilesh
when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.
当您使用 element.name 时，您正在访问该属性/创建一个名为“name”的属性并设置其值。
but,
但，
while using, element.setAttribute('name','someName'), you are actually setting the attribute 'name'.
在使用 element.setAttribute('name','someName') 时，您实际上是在设置属性 '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.
IE8及以下的属性和属性一视同仁，IE9及以上的bug已经修复。
Safari、FireFox、Chrome 以不同的方式对待属性和属性。
However, you can always create a new property of your choice if you wish to do so.
但是，如果您愿意，您始终可以创建您选择的新属性。
