Element.value 和 Element.getAttribute("value") 的区别

Question

我想知道这两者之间的区别是什么。我注意到有时这两种方法会得出不同的结果。

- ama2

---

可能是重复的问题：使用getAttribute()还是不使用getAttribute()：这是个问题 - Felix Kling

尽管这个问题涉及set而非get，但其中的信息可能会对您有所帮助。 - j08691

@j08691 映射到属性的属性始终反映该属性的当前值。 - Esailija

@j08691 是的，那概括得相当好。 - ama2

可能是JavaScript中何时使用setAttribute vs .attribute=？的重复问题。 - Peter O.

Answer 1

区别在于element.value是实时的，如果用户更改了比如文本框输入，它将反映出来，并显示新值。

而getAttribute('value')仍然显示原始的value="whateverWasHere"值。

jsFiddle DEMO

- Mark Pieszak - Trilon.io

---

这解释了我所见到的行为。谢谢 :) - ama2

@Mark，有个问题。为什么如果我在一个input元素上执行Element.attributes操作，它基本上代表了描述该属性的任何信息的键/值对字符串，我看不到存储实际值的value属性（即包含该input所包含的实际值的属性）... 它给我一个NamedNodeMap对象，其中包含一些属性，但不包括保存实际值的value属性。然而，如果我执行像thatInput.value这样的操作，我当然可以看到该值。为什么value不在Element对象的attributes属性中？ - Marius Mucenicu

元素本身是否存在 value="" 值？ 如果没有在那里指定，它不会显示在列表中（我相信），这可能是为什么它没有显示的原因！但例如，如果我执行 document.querySelector('#test').attributes.value，我会看到一个空白的新输入文本框的 value=""。@MariusMucenicu - Mark Pieszak - Trilon.io

Answer 2

.value不对应任何属性。

.defaultValue 对应 "value" 属性。所以当你使用 elem.getAttribute("value") 时，与 elem.defaultValue 相同。

另外，当输入框未被更改过（dirty value flag is false），.defaultValue 反映了 .value 的值。当用户更改输入框的值后，这个映射关系就会停止。当输入框未被更改时，你可以更改 .defaultValue 值（并因此更改 .setAttribute("value")），并看到它也更改了 .value 值。虽然这并不实用，但是仍然是一个有趣的小知识点。

- Esailija

---

@ama2 我的观点是.value和属性"value"不同，但是.defaultValue却相同。这就是为什么它有些不直观了。请参考 http://jsfiddle.net/J9Mat/2/ - Esailija