Итак, я учусь манипулировать 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.
Не знаю, почему метод точечной нотации не работает в первом случае.
Почему это происходит?
Мое предположение (потому что вы не указали тип элемента), элемент обычно не имеет атрибута name, поэтому установка свойства DOM вроде бы не будет работать.
Например, установка свойства name в элементе input будет работать. Установка его на div не будет.
Он будет работать, однако, с setAttribute().
Чтобы расширить ответы, предоставленные некоторыми другими...
Атрибут "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/ в качестве примера. Кстати - окно предупреждения о загрузке является преднамеренным - проверьте код, чтобы понять, почему...
(Попытка объяснить часть вышеупомянутого поста лучше, отдельно, поскольку он уже вошел в рейтинг -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");
когда вы используете, element.name, вы получаете доступ к свойству/создаете свойство с именем "name" и устанавливаете его значение.
когда вы используете, element.name, вы получаете доступ к свойству/создаете свойство с именем "name" и устанавливаете его значение.
но
при использовании element.setAttribute('name', 'someName'), вы фактически устанавливаете атрибут 'name'.
IE8 и ниже рассматривают свойство и атрибут как одно и то же, ошибка была исправлена в IE9 и выше.
Safari, FireFox, свойство Chrome и атрибут по-разному.
Однако вы всегда можете создать новое свойство по вашему выбору, если вы этого хотите.
<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>