Что происходит за .setAttribute vs .attribute =?

Описание:

Я использую простой javascript чтобы установить значение input. Я использую несколько методов, которые кажутся одинаковыми, но с разными результатами. Вот пример:

HTML:

<input name="testinput" value="" type="text" />

Javascript:

var input = document.getElementByTagName('input')[0];
input.value = "5"

console.log(input.value) // returns "5"
console.log(input.getAttribute("value")) // returns ""

Конечно, при использовании функции setAttribute() функциональность меняется на setAttribute(). Тем не менее, при отправке формы они оба дают результат input=5.

Вопрос:

Какой смысл разделять два свойства? .value хранится не так, как .getAttribute("value")?

Отказ от ответственности:

Я прочитал:

Оба этих вопроса/ответов оставили меня смущенным и неудовлетворенным.

Ответ 1

input.value является точечной нотацией, она устанавливает свойство value входного объекта.

Он никоим образом не обновляет атрибуты, поэтому попытка получить атрибут с тем же именем будет не возвращать обновленное значение.

Если по какой-то причине вам нужно обновить атрибут, вы бы сделали

input.setAttribute('value', 'new_value');

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

Атрибут в HTML - это пара ключ/значение внутри открывающих и закрывающих скобок, как в

<div attribute="attribute_value"></div>

Во многих случаях такие атрибуты будут устанавливать начальное значение базового свойства, а свойство - это именованный ключ со значением, который привязан к внутренней модели элемента, к чему мы обращаемся с javascript, объект удерживая модель и данные для элемента.

Изменение любого из этих объектов ключей или значений не изменяет HTML, а только внутреннее представление элемента, объекта. Однако изменение атрибутов HTML в некоторых случаях изменяет представление объекта.

getAttribute получает фактические атрибуты из HTML, а не свойства, а element.value явно обращается к именованному свойству в объекте, представляющем этот элемент.

Ответ 2

Важно учитывать различия между атрибутами и свойствами.

Атрибут `value`

Атрибут value <input>, видимый в представлении HTML элемента, отображается в свойство defaultValue. Например:

var i = document.createElement('input');
i.setAttribute('value', 'foo');
console.log(i.defaultValue, i.getAttribute('value')); // "foo foo"

i.defaultValue = 'bar';
console.log(i.defaultValue, i.getAttribute('value')); // "bar bar"

Свойство `value`

Свойство value отражает свойство defaultValue (и атрибут value), пока оно явно не получит значение, поэтому:

var i = document.createElement('input');
i.defaultValue = 'foo';
console.log(i.value); // "foo"

i.value = 'bar';
i.defaultValue = 'foo';
console.log(i.value); // "bar"

Это еще один способ взглянуть на это:

<input value="foo">
       ↑↓
input.defaultValue = "foo";
        ↓
input.value
  get(): value === undefined ? input.defaultValue : value
  set(newValue): value := newValue

Якоря

При использовании якорей атрибут href и свойство href обновляют друг друга, но по-другому, например:

var a = document.createElement('a');
a.setAttribute('href', '/test');
console.log(a.href); // "http://stackoverflow.com/test"

a.href = '/test';
console.log(a.getAttribute('href')); // "/test"

Другие элементы

Здесь (частичный) список атрибутов и их соответствующие свойства:

element  | attribute | property
---------+-----------+----------------
option   | selected  | defaultSelected (bool)
label    | for       | htmlFor
input    | checked   | defaultChecked (bool)
select   | multiple  | multiple (bool)
li       | value     | value (int)

Как вы можете видеть, тогда как атрибуты всегда являются строками, соответствующие свойства могут быть других типов.