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

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

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

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


javascript setattribute getelementsbyname
person dkugappi    schedule 08.12.2011    source источник
comment
Как правило, старайтесь избегать использования getElementsByName   -  person zzzzBov    schedule 08.12.2011
comment
Почему следует избегать использования getElementsByName?   -  person Victor Zamanian    schedule 03.10.2012
comment
Атрибуты доступны с использованием записи через точку, если вы хотите получить к ним доступ именно так. Если вы хотите получить доступ к атрибутам с помощью записи через точку, вам нужно обратиться к obj.attributes.attributeName, чтобы получить атрибут, и к obj.attributes.attributeName.value, чтобы управлять его значением. Это многословно по сравнению с setAttribute или getAttribute. и не рекомендуется как решение, но независимо от этого, полный ответ на ваш вопрос Почему не работает точечная запись в первом случае - должен включать. Вы просто искали не в том месте атрибуты и их значения.   -  person Radiotrib    schedule 24.03.2013

Ответы (5)


arrow_upward
19
arrow_downward

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

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

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

jsFiddle.

person alex    schedule 08.12.2011
comment
Сэр, когда я устанавливаю атрибут элемента html как undefined , он не работает и продолжает принимать свои предыдущие значения. Можете ли вы сказать мне, почему так? - person Suraj Jain; 12.08.2017
comment
@SurajJain Возможно, потому что API не позволяет атрибуту быть undefined. - person alex; 13.04.2018
comment
Прошел почти год. - person Suraj Jain; 13.04.2018

arrow_upward
7
arrow_downward

Чтобы расширить ответы, предоставленные некоторыми другими ...

Атрибут «имя» считается допустимым 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/ для примера. Кстати - окно предупреждения при загрузке сделано намеренно - проверьте код, чтобы понять, почему...

person Radiotrib    schedule 24.03.2013

arrow_upward
3
arrow_downward

(Попытка объяснить часть вышеприведенного поста лучше, отдельно, так как он уже попал в рейтинг -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");
person Manohar Reddy Poreddy    schedule 05.06.2015

arrow_upward
1
arrow_downward

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

person Community    schedule 28.01.2018

arrow_upward
0
arrow_downward

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

но,

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

IE8 и более ранние версии обрабатывают свойство и атрибут как одно и то же, ошибка была исправлена ​​в IE9 и более поздних версиях.
Safari, FireFox, Chrome обрабатывают свойство и атрибут по-разному.

Однако вы всегда можете создать новое свойство по своему выбору, если хотите.

person Nilesh    schedule 22.03.2013
comment
частичный ответ ... ограниченный и не объясняет причину проблемы - person Radiotrib; 25.03.2013