Javascript: setAttribute() v.s. element.attribute = значение для установки атрибута name

Итак, я учусь манипулировать 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.

Не знаю, почему метод точечной нотации не работает в первом случае.

Почему это происходит?

Ответ 1

Мое предположение (потому что вы не указали тип элемента), элемент обычно не имеет атрибута name, поэтому установка свойства DOM вроде бы не будет работать.

Например, установка свойства name в элементе input будет работать. Установка его на div не будет.

Он будет работать, однако, с setAttribute().

jsFiddle.

Ответ 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>

Для этих объектов вы можете установить, получить и изменить атрибут name, используя object.name, НО ДЛЯ ЛЮБОГО ДРУГОГО ОБЪЕКТА DOM, атрибут 'name' является пользовательским атрибутом и должен быть создан с помощью SetAttribute() или путем добавления его в HTML декларация. Как только он создан, вы можете получить к нему доступ, используя setAttribute() и getAttribute(), или вы можете обратиться к его значению напрямую, используя object.attributes.name.value, взгляните на http://jsfiddle.net/radiotrib/yat72/1/ в качестве примера. Кстати - окно предупреждения о загрузке является преднамеренным - проверьте код, чтобы понять, почему...

Ответ 3

(Попытка объяснить часть вышеупомянутого поста лучше, отдельно, поскольку он уже вошел в рейтинг -ve, и вера в этот пост будет меньше. Помогите улучшить это, если не лучше.)

*** property

Когда вы используете element.name, вы получаете доступ к существующему property с именем "name" или устанавливаете его значение.

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");

Ответ 4

когда вы используете, element.name, вы получаете доступ к свойству/создаете свойство с именем "name" и устанавливаете его значение.

Ответ 5

но

при использовании element.setAttribute('name', 'someName'), вы фактически устанавливаете атрибут 'name'.

IE8 и ниже рассматривают свойство и атрибут как одно и то же, ошибка была исправлена в IE9 и выше.
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>