Question

所以我正在学习操纵DOM，我注意到一件有趣的事情：

假设我想使用“。”设置元素的name属性。点符号：

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

但是，如果我使用document.setAttribute()方法，它可以正常工作：

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

不确定为什么点符号方法在第一种情况下不起作用。

为什么会这样？

Answer 1

我的猜测（因为你没有指定元素类型）是元素通常没有name属性，所以设置这样的DOM属性是行不通的。

例如，在name元素上设置input属性将起作用。在div上设置不会。

然而，setAttribute()会有效。

jsFiddle

Answer 2

扩展其他一些人提供的答案......

属性“name”仅被视为少数特定对象的有效DOM。根据{{3}}，这些对象是：

 <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, 
 <map>, <meta>, <object>, <param>, <select>, and <textarea>

对于这些对象，您可以使用object.name设置，获取和更改名称属性但是对于任何其他DOM对象，属性“名称”是自定义属性，必须使用SetAttribute()或通过添加来创建它到HTML声明。创建后，您可以使用setAttribute()和getAttribute()访问它，或者您可以使用object.attributes.name.value直接引用其值，请查看https://developer.mozilla.org/en-US/docs/DOM/element.name示例。 BTW - 加载时的警报框是有意的 - 检查代码以查看原因......

Answer 3

（试图解释以上帖子的一部分更好，分开，因为它已经进入了-ve评级，并且相信该帖子会更少。帮助进一步改进。）

*** property

当您使用element.name时，您正在访问名为“name”的现有property或设置其值。

Example 1:
var div1 = document.getElementById("div1"); 
div1.textContent = "2";

*** attribute

但是，在使用element.setAttribute('name','someName')时，您实际上是在设置attribute名为'name'。此属性也可以是现有属性

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

Example 3:
var d = document.getElementById("d1"); 
d.setAttribute("name1", "value1");

Answer 4

当你使用element.name时，你正在访问属性/创建一个名为“name”的属性并设置它的值。

Answer 5

当你使用element.name时，你正在访问属性/创建一个名为“name”的属性并设置它的值。

但是，

在使用element.setAttribute（'name'，'someName'）时，实际上是在设置属性'name'。

IE8及以下版本将属性和属性视为相同，该错误已在IE9及以上版本中修复 Safari，FireFox，Chrome对待属性和属性的方式不同。

但是，如果您愿意，可以随时创建自己选择的新属性。

Answer 6

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

Javascript：setAttribute（）v.s. element.attribute = value来设置“name”属性

6 个答案: