Javascript：setAttribute() 与element.attribute = 设置“名称”属性的值答案

【问题标题】：Javascript: setAttribute() v.s. element.attribute = value to set "name" attributeJavascript：setAttribute() 与element.attribute = 设置“名称”属性的值
【发布时间】：2011-12-08 05:14:27
【问题描述】：

所以我正在学习操作 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.

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

为什么会这样？

【问题讨论】：

一般尽量避免使用getElementsByName
为什么要避免使用 getElementsByName？
属性可以使用点符号来访问，如果您希望这样访问它们。如果您希望使用点表示法访问属性，您需要参考 obj.attributes.attributeName 来检索属性和 obj.attributes.attributeName.value 来操作其值。与 setAttribute 或 getAttribute 相比，它是冗长的。并且不推荐作为解决方案，但无论如何，对您的问题“为什么点表示法在第一种情况下不起作用”的完整答案 - 必须包括“它确实如此。您只是在错误的地方寻找属性以及他们的价值观。”

标签： javascript setattribute getelementsbyname

【解决方案1】：

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

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

不过，它适用于 setAttribute()。

jsFiddle.

【讨论】：

先生，当我将某些 html 元素属性设置为 "undefined" 时，它不起作用，它继续采用以前的值。你能告诉我为什么会这样吗？
@SurajJain 可能是因为 API 不允许属性为 undefined。
快一年过去了。

【解决方案2】：

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

属性 '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>

对于这些对象，您可以使用 object.name 设置、获取和更改名称属性，但对于任何其他 DOM 对象，属性“名称”是自定义属性，必须使用 SetAttribute() 或通过将其添加到 HTML 来创建宣言。创建后，您可以使用setAttribute() 和getAttribute() 访问它，或者您可以直接使用object.attributes.name.value 引用它的值，例如查看http://jsfiddle.net/radiotrib/yat72/1/。顺便说一句-加载时的警报框是故意的-检查代码以了解原因...

【讨论】：

【解决方案3】：

（尝试单独更好地解释上述帖子的一部分，因为它已经进入 -ve 评级，并且对该帖子的信念将更少。如果不是更好，请帮助进一步改进。）

***property

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

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

***attribute

但是，在使用 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");

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

但是，

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

IE8及以下将property和attribute视为相同，IE9及以上已修复该bug。
Safari、FireFox、Chrome 对待属性和属性的方式不同。

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

【讨论】：

部分答案...有限，没有解释问题背后的原因

【解决方案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>

【讨论】：