2 типа значений textarea [дубликат]

Henderz спросил: 28 апреля 2018 в 09:18 в: javascript

У этого вопроса уже есть ответ:

  • What is the difference between properties and attributes in HTML? 3 ответа

Элемент HTML <textarea/> одновременно содержит 2 поля "значение"; и только один из них виден при просмотре html-источника элемента. (показано в примере ниже).

Может ли кто-нибудь объяснить, почему это так, и где здесь хранится значение "Type2"?

Теория: В чем разница между свойствами и атрибутами в HTML?

var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.setAttribute('value', "Type1");
dummy.value = "Type2";

console.log("attributeValue is " + dummy.getAttribute('value'));
console.log(".value is " + dummy.value);

1 ответ

Есть решение
Rory McCrossan ответил: 28 апреля 2018 в 09:25

Ваш вызов setAttribute() применяет атрибут value к элементу textarea в DOM. Это технически неверно, поскольку элементы textarea не имеют атрибута value.

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

Результатом этой логики является этот HTML:

<textarea value="Type1">Type2</textarea>

Когда вы используете getAttribute() вы читаете (нестандартный) value атрибут из элемента, который возвращает Type1.

Когда вы читаете свойство value , вы (правильно) читаете значение, содержащееся в редактируемом пользователем содержимом поля, которое возвращает Type2.

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