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

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

14 голосов
/ 08 декабря 2011

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

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

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

Ответы [ 6 ]

16 голосов
/ 08 декабря 2011

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

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

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

jsFiddle .

5 голосов
/ 24 марта 2013

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

Атрибут '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, атрибут 'name'пользовательский атрибут и должен быть создан с помощью SetAttribute() или путем добавления его в объявление HTML.После того, как он создан, вы можете получить к нему доступ, используя setAttribute() и getAttribute(), или вы можете обратиться к его значению напрямую, используя object.attributes.name.value, например, посмотрите на http://jsfiddle.net/radiotrib/yat72/1/.КСТАТИ - предупреждение о загрузке является преднамеренным - проверьте код, чтобы увидеть, почему ...

2 голосов
/ 05 июня 2015

(Попытка объяснить часть вышеупомянутого поста лучше, отдельно, так как он уже вошел в рейтинг -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");
1 голос
/ 28 января 2018

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

0 голосов
/ 30 сентября 2013 
<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>
0 голосов
/ 22 марта 2013

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

но,

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

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

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

...