16

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

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

为什么会这样？

4

6 回答 6

19

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

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

但是，它适用于setAttribute().

js小提琴。

于 2011-12-08T05:20:24.870 回答
7

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

属性 '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/ 。顺便说一句-加载时的警报框是故意的-检查代码以了解原因...

于 2013-03-24T16:50:14.470 回答
3

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

*** 这property

当您使用 element.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");
于 2015-06-05T11:58:42.227 回答
1

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

于 2018-01-28T19:04:55.870 回答
0 
<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>
于 2013-09-30T01:54:10.150 回答
0

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

但，

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

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

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

于 2013-03-22T12:20:27.010 回答